5.canvas

1.canvas：固定语句：定义画布/设置绘图环境为2d。

2.canvas样式：lineWidth线宽/strokeStyle绘制样式。

 

3.canvas绘制矩形：

Context.moveTo(x轴,y轴); //起点

Context.lineTo(x轴,y轴); //中间点

Context.stroke(); //开始绘制

Context.beginPath(); //创建新的路径

Context.closePath(); //回到起始点

Context.rect(x,y,w,h); //创建一个矩形

Context.strokeRect(x,y,w,hx,y,w,h); //绘制矩形（无填充）

Context.fillRect(x,y,w,h); //绘制“被填充”的矩形

 

4.canvas绘制圆弧：

Context.arc(x,y,r,开始角度,结束角度,true逆时针/false顺时针); //创建圆弧

 

5.canvas绘制扇形：

 

6.canvas绘制文字：

Context.strokeText(“文字”,x,y,maxwidth); //空心文字

Context.fillText(“文字”,x,y,maxwidth); //实心文字

Context.font(大小 字体); //字体样式

 

7.canvas渐变色：

Context.createLinearGradient(x1,y1,x2,y2); //创建线性渐变，颜色渐变的起始坐标和终点坐标。

Context.addColorStop(位置,”颜色值”); //0表示起点···插入点···1表示终点。

Context.createRadiaGradient(x1,y1,r1,x2,y2,r2); //创建环形渐变。