目录
1 绘制虚线
2 绘制动画效果
2.1绘制图形-快速绘制矩形
2.2 动画矩形
3 绘制文本
4 绘制图片
4.1 绘制图片1
4.2 绘制图片2
4.3 绘制图片3
4.4 解决绘制图片失真效果
5 绘制圆弧
5.1 绘制圆弧
5.2 绘制圆弧上任意一点
6 平移【坐标系圆点的平移】
7 旋转【坐标系旋转】
8 伸缩
9 练习
1 绘制虚线
原理：
设置虚线其实就是设置实线与空白部分直接的距离,利用数组描述其中的关系
例如： [10,10] 实线部分10px 空白部分10px
例如： [10,5] 实线部分10px 空白部分5px
例如： [10,5,20] 实线部分10px 空白5px 实线20px 空白部分10px 实线5px 空白20px....
绘制：
ctx.setLineDash(数组);
ctx.stroke();
例如：
ctx.moveTo(100, 100);
ctx.lineTo(300, 100);
ctx.setLineDash([2,4]);
ctx.stroke();
注意：
如果要将虚线改为实线，只要将数组改为空数组即可。
<body> <canvas width="600" height="400"></canvas> <script type="text/javascript"> //获取canvas画布对象 var canvas = document.querySelector("canvas"); //获取绘图上下文 var ctx = canvas.getContext("2d"); ctx.strokeStyle = "red"; ctx.moveTo(100, 50); ctx.lineTo(400, 50); ctx.setLineDash([20, 20]);//1 ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = "blue"; ctx.moveTo(100, 100); ctx.lineTo(400, 100); ctx.setLineDash([10, 5]);//2 ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = "green"; ctx.moveTo(100, 150); ctx.lineTo(400, 150); ctx.setLineDash([10, 5, 20]);//3 ctx.stroke(); </script> </body>
2 绘制动画效果
☞ 绘制一个描边矩形： content.strokeRect(x,y,width,height)
☞ 绘制一个填充矩形： content.fillRect(x,y,width,height)
☞ 清除：content.clearRect(x,y,width,height)
☞ 实现动画效果：
1. 先清屏
2. 绘制图形
3. 处理变量
2.1绘制图形-快速绘制矩形
1、ctx.strokeRect(100, 100, 200, 200);
2、ctx.fillRect(330, 100, 200,200);
<body> <canvas width="600" height="400"></canvas> <script type="text/javascript"> //获取canvas画布对象 var canvas =document.querySelector("canvas"); //获取绘图上下文 var ctx=canvas.getContext("2d"); //描边矩形 ctx.strokeStyle="red"; ctx.strokeRect(100, 100, 200, 200); ctx.beginPath(); //填充矩形 ctx.fillStyle="red"; ctx.fillRect(330, 100, 200,200); //清除效果 ctx.clearRect(340, 100, 10, 200); </script> </body>
2.2 动画矩形
x是矩形开始位置的 x 坐标step是每次移动的距离i是方向变量，用于改变矩形的移动方向- 使用
setInterval函数设置一个定时器，每隔 20 毫秒（即每秒 50 次）执行一次函数，该函数包含动画逻辑。- 动画逻辑
- 清屏：使用
ctx.clearRect(0, 0, canvas.width, canvas.height);清除画布上的所有内容。- 绘制矩形：使用
ctx.fillRect(x, 100, 100, 200);在当前x坐标位置绘制一个矩形。- 更新变量：增加
x的值以移动矩形。- 改变方向：如果矩形碰到画布的右侧或左侧边缘，则改变移动方向。（左侧x<0,反向；右侧x>canvas.width - 100，反向）
例：实现一个简单的“反弹”动画，矩形在画布上来回移动。
<body> <canvas width="600" height="400"></canvas> <script type="text/javascript"> //获取canvas画布对象 var canvas =document.querySelector("canvas"); //获取绘图上下文 var ctx=canvas.getContext("2d"); //开始位置 var x=0; //处理的是一个增量 var step=5; //改变的方向的 var i=1; //创建一个定时器 setInterval(function(){ //先清屏 ctx.clearRect(0, 0, canvas.width, canvas.height); //开始绘制图形 ctx.fillRect(x, 100, 100, 200); //开始处理变量 x+=step*i; if(x>canvas.width-100){ i=-1; }else if(x<0){ i=1; } },20); </script> </body>
3 绘制文本
☞ 绘制填充文本
content.fillText(文本的内容,x,y)
☞ 绘制镂空文本
content.strokeText();
☞ 设置文字大小：
content.font="20px 微软雅黑"
备注： 该属性设置文字大小，必须按照cssfont属性的方式设置
☞ 文字水平对齐方式【文字在圆心点位置的对齐方式】
content.textalign="left | right | center"
☞文字垂直对齐方式
content.textBaseline="top | middle | bottom | alphabetic(默认)"
☞文字阴影效果
- ctx.shadowColor="red"; 设置文字阴影的颜色
- ctx.ShadowOffsetX=值; 设置文字阴影的水平偏移量
- ctx.shadowOffsetY=值; 设置文字阴影的垂直偏移量
- ctx.shadowBlur=值; 设置文字阴影的模糊度
样例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> canvas { border: 1px solid red; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script type="text/javascript"> //获取canvas画布对象 var canvas =document.querySelector("canvas"); //获取绘图上下文 var ctx=canvas.getContext("2d"); ctx.moveTo(300, 0); ctx.lineTo(300, 400); ctx.stroke(); ctx.beginPath(); ctx.moveTo(0, 200); ctx.lineTo(600,200); ctx.stroke(); //设置文字大小： 与css设置文字一样 ctx.font="40px 微软雅黑"; //设置文字的对齐方式 ctx.textAlign="center"; //设置文字上下对齐方式 ctx.textBaseline="middle"; //设置带阴影的效果 ctx.shadowColor="red"; ctx.shadowOffsetX=5; ctx.shadowOffsetY=5; ctx.shadowBlur=10; ctx.strokeText("撸起袖子加油干", 300, 200); ctx.fillText("撸起袖子加油干", 300, 200); </script> </body> </html>
4 绘制图片
4.1 绘制图片1
将图片绘制到画布的指定位置
content.drawImage(图片对象,x,y);
<body> <canvas width="600" height="400"></canvas> <script type="text/javascript"> //获取canvas画布对象 var canvas = document.querySelector("canvas"); //获取绘图上下文 var ctx = canvas.getContext("2d"); //将图片绘制到画布的指定区域 var img = document.createElement("img"); img.src = "1.jpg"; //在图像加载完成后被触发 img.onload = function () { ctx.drawImage(img, 0, 0); } </script> </body>按照原来图片的大小显示的
4.2 绘制图片2
将图片绘制到指定区域大小的位置
x,y指的是矩形区域的位置，width和height指的是图片的大小
content.drawImage(图片对象,x,y,width,height);
<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> canvas { border: 1px solid red; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script type="text/javascript"> //获取canvas画布对象 var canvas = document.querySelector("canvas"); //获取绘图上下文 var ctx = canvas.getContext("2d"); var img = document.createElement("img"); img.src = "1.jpg"; img.onload = function () { ctx.drawImage(img, 0, 0, 300, 300); } </script> </body>可以设置插入图片的大小，及起点
4.3 绘制图片3
将图片的指定区域绘制到指定矩形区域内
content.drawImage(图片对象,sx,sy,swidth,sheight,dx,dy,dwidth,dheight);
- sx,sy 指的是要从图片哪块区域开始绘制，
- swidth，sheight 是指截取图片区域的大小
- dx,dy 是指矩形区域的位置，
- dwidth,dheight是值矩形区域的大小
<body> <canvas width="600" height="400"></canvas> <script type="text/javascript"> //获取canvas画布对象 var canvas =document.querySelector("canvas"); //获取绘图上下文 var ctx=canvas.getContext("2d"); var img=document.createElement("img"); img.src="1.jpg"; img.onload=function(){ ctx.drawImage(img, 810,0,387,331,0,0,387,331); } </script> </body>
4.4 解决绘制图片失真效果
解决图片绘制到某一个区域的按原比例缩放绘制：
绘制宽：绘制高==原始宽：原始高
<body> <canvas width="600" height="400"></canvas> <script type="text/javascript"> //获取canvas画布对象 var canvas =document.querySelector("canvas"); //获取绘图上下文 var ctx=canvas.getContext("2d"); var img=document.createElement("img"); img.src="1.jpg"; img.onload=function(){ var img_width=img.width; var img_height=img.height; var drowHeight=200*img_height/img_width; ctx.drawImage(img, 100, 50, 200,drowHeight); } </script> </body>
5 绘制圆弧
content.arc(x,y,radius,startradian,endradian[,direct]);
x,y 圆心的坐标
- radius 半径
- startradian 开始弧度
- endradian 结束弧度
- direct 方向（默认顺时针 false） true 代表逆时针
☞ 0度角在哪？
以圆心为中心向右为0角 顺时针为正，逆时针为负
☞ 备注：
角度 和 弧度的关系： 角度:弧度= 180:pi
☞ 绘制圆上任意点：
公式：
x=ox+r*cos( 弧度 )
y=oy+r*sin( 弧度 )
- ox: 圆心的横坐标
- oy: 圆心的纵坐标
- r： 圆的半径
5.1 绘制圆弧
例：开始弧度为0 结束弧度为360
<body> <canvas width="600" height="400"></canvas> <script type="text/javascript"> //获取canvas画布对象 var canvas =document.querySelector("canvas"); //获取绘图上下文 var ctx=canvas.getContext("2d"); ctx.arc(300, 200, 100, 0, 2*Math.PI); ctx.stroke(); </script> </body>
5.2 绘制圆弧上任意一点
绘制圆弧上任意一点：将点的圆心定位到圆弧上，设置的半径较小，开始弧度为0 结束弧度为360，设置为填充，则外观上则呈现出一个小圆点
<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> canvas { border: 1px solid red; } </style> </head> <body> <canvas width="600" height="400"></canvas> <script type="text/javascript"> //获取canvas画布对象 var canvas =document.querySelector("canvas"); //获取绘图上下文 var ctx=canvas.getContext("2d"); ctx.moveTo(300, 0); ctx.lineTo(300, 400); ctx.moveTo(0, 200); ctx.lineTo(600, 200); ctx.stroke(); ctx.beginPath(); ctx.arc(300, 200, 100, 0, 2*Math.PI); ctx.stroke(); ctx.beginPath(); var x=300+Math.cos(Math.PI/3)*100; var y=200+Math.sin(Math.PI/3)*100; ctx.arc(x, y, 10, 0, Math.PI*2); ctx.fillStyle="red"; ctx.fill(); </script> </body>
6 平移【坐标系圆点的平移】
ctx.translate(x,y);
特点：通过该方法可以将原点的位置进行重新设置。
注意：
1. translate(x,y) 中不能设置一个值
2. 与moveTo(x,y) 的区别：
- moveTo(x,y) 指的是将画笔的落笔点的位置改变，而坐标系中的原点位置并没有发生改变
- translate(x,y) 是将坐标系中的原点位置发生改变
7 旋转【坐标系旋转】
ctx.rotate(弧度)
8 伸缩
ctx.scale(x,y)
备注：
沿着x轴和y轴缩放
x,y 为倍数 例如： 0.5 1
9 练习
制作一个在线播放器视频
