canvas常用api
2021-02-14 21:15
1. 在canvas标签中给出长宽（不带单位）：
或者在js中设置长宽：canvas.width = 600; canvas.height = 600;
注意：canvas是行内块元素，用CSS设置的width和height像素值是canvas在页面渲染出来的宽高，而用js设置或者在标签中直接给出的则是canvas的分辨率，二者有本质的区别。
canvas元素的使用与普通的html元素并不相同，它有一个默认尺寸300*150，在css中设置宽高只能改变canvas的显示宽高，而并没有改变画布绘制时的尺寸，所以要为canvas设置绘制的尺寸，必须写在元素标签上或用JS设置。
2. 浏览器兼容时，不会显示canvas标签内的内容；不兼容时才会显示。
3. var canvas = document.getElementById("canvas"); // 获取canvas标签
var context = canvas.getContext("2d"); // 获取2d上下文环境
context.beginPath();//可以开始绘制
context.moveTo(100,100); //画笔移动到(100,100);
context.lineTo(150,200); //创建一条从(100,100)到(150,200)的路径
context.fillStyle = "#ccc"; //填充颜色为#ccc
context.strokeStyle = "#fff"; //进行描边
context.lineWidth = 5;
context.fill();//进行填充
context.stroke();//进行描边
context.closePath();//关闭当前路径 （基于状态）
关于closePath():当当前路径不是封闭路径时，使用closePath会自动将当前路径的首尾连接起来
context.fillRect(x,y,w,h);
context.clearRect(50, 30, 110, 35); //清除画布上的内容
(50,30)为矩形起点，110.35为矩形长宽
想绘制多条不封闭路径图形，在每次绘制新路径时使用beginPath即可
4. 绘制弧线
context.arc(x,y,r,startingAngle,endingAngle,anticlockwise = false);
参数分别为：圆心坐标，半径，起始角度，结束角度，时钟方向（false为顺时针、true为逆时针）
三点钟方向为0pi,六点钟方向为0.5pi,九点钟为1.0pi,12点钟为1.5pi
例如：context.arc(300,300,100,0,Math.PI*1.5,false);
5. 绘制矩形
context.fillRect(x,y,w,h);
context.strokeRect(50, 30, 110, 35)
context.clearRect(50, 30, 110, 35); //清除画布上的内容
6. 绘制虚线
context.setLineDash([a,b]);//a为虚线线段长度,b为虚线线段间隔长度
7. 取得canvas元素相对于浏览器窗口的位置
element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置
8. 绘制图片
cvs.drawImage(image.x,y,width,height);
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
image可以是元素或是image对象，但不能是路径
传递给 drawImage() 方法的图像必须是 Image 对象或 Canvas 元素