canvas标签的宽高属性不要在css中设置

canvas=document.querySelector(“canvas”);

ctx=canvas.getContext(“2d”);

矩形：绘制矩形：ctx.fillRect(10,10,55,50) //参数解释，前两个参数是画布中的位置，后两个参数是所创建矩形的宽高

填充矩形(颜色)： ctx.fillStyle=“rgb(200,0,0);”

绘制矩形边框：ctx.strokeRect(50,50,100,100)

清除矩形区域：ctx.clearRext(x,y,width,height)

笔触颜色(边框)：strokeStyle="#000000";

笔触粗细：ctx.lineWidth=5；

创建笔触框：ctx.strokeRect（50，50,100,100）

填充色：同上改颜色，fillStyle="#000000"

透明度：globalAlpha=0.5

createLinearGradient(x1,y1,x2,y2);//返回一个canvasGradient对象,线性渐变

var file=ctx.createLinearGradient(0,0,200,200);

file.addColorStop(0,"red");

file.addColorStop(1,"#FFFFFF")// 第一个参数不能超过1

ctx.fillStyle=file;

ctx.fillRect(0,0,200,200) 

createRadialGradient(x1,y1,r1,x2,y2,r2)//此方法要接受六个参数，前三个参数定义一个以(x1,y1)为原点，半径为r1的圆，后三个参数则定义一个以(x2,y2)为原点，半径为r2的圆
var radgrad=ctx.createRadialGradient(45,45,10,52,52,15)
radgrad.addColorStop(0,"#A7D30C")
radgrad.addColorStop(0.9,"#cccccc")
radgrad.addColorStop(1,"#ffffff")
ctx.fillStyle="red";
ctx.fillRect(0,0,100,100);

图形填充（需要预加载）

createPattern(image,type)//image参数代表图片地址，type参数有：repeat、repeat-x、repeat-y、no-repeat

例：
 	var img=new Image();
	img.src="./img/...";
	img.addEventListener("load",loadHandler);
	function loadHandler(e){
        var fill=createPattern(img,"no-repeat");
        ctx.fillStyle=fill;
        ctx.fillRect(0,0,200,200);
    }

阴影：
	shadowOffsetX  //x偏移
    shadowOffsetY 	//y偏移
    shadowBlur		//模糊	
    shadowColor  	//颜色
  例：
  	ctx.fillStyle=fill;
	ctx.shadowOffsetX=2;
	ctx.shadowOffsetY=2;
	ctx.shadowBlur=10;
	ctx.shadowColor="#999999"

ctx.lineJoin:两端连接处所显示的样子：round 、bevel 、miter（默认）[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EotcfiPo-1597935294770)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20200820202111189.png)]

ctx.beginPath();//新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径

ctx.closePath(); //闭合路径之后图形绘制命令又重新指向上下文，也就是说，闭合路径并不是必须的，这个方法会通过绘制一条从当前点到开始点的直线来闭合图形

moveTo(x,y) //移动到开始点

lineTo(x,y) //绘制笔触线条到什么位置

stroke()//通过线条绘制轮廓

fill() //通过填充路径的内容区域生成实心的图形

arc(x,y,radius.startAngle,endAngle,s顺时针或者逆时针(默认FALSE顺时针，填true就是逆时针))//这里的是弧度，Math.PI/180*角度。

arcTo(x1,y1,x2,y2,radius) //连接弧线

二次贝塞尔曲线：ctx.quadraticCurveTo(cp1x,cp1y,x,y) //cp1x,cp1y作为一个控制点，xy为结束点（也就是单点拖拽，控制曲线）

三次贝塞尔曲线：ctx.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) //cp1x,cp1y作为控制点1，cp2x,cp2y作为控制点2，x，y为结束点（也就是两控制点拖拽来控制曲线）

path2D：new Path(2D) //用于装在绘制路径

var circle=new Path(2D); //用于装载绘制路径
circle.moveTo(125，35);
circle.arc(100,35,25,0,2*Math.PI);

还可用来装载svg

var p = new Path2D(“M10 10 h 80 v 80 h -80 Z”);

这条路径将先移动到点 (M10 10) 然后再水平移动80个单位(h 80)，然后下移80个单位 (v 80)，接着左移80个单位 (h -80)，再回到起点处 (z)。