画圆

画圆
ctx.beginPath();
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
x：圆的中心的 x 坐标。
y：圆的中心的 y 坐标。
r：圆的半径。
sAngle：起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle：结束角，以弧度计。
counterclockwise：可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
ctx.arc(100, 100, 20, 0.5 * Math.PI, 2 * Math.PI);
ctx.stroke();只显示线条
ctx.fill();从结束点到起始点全部填满

画线
ctx.moveTo(x, y);起点
ctx.lineTo(x1, y1); 终点（可以无限接）

上色
ctx.fillStyle = ""; 把填充的上颜色
ctx.strokeStyle = ""；画出的线条上颜色

 

文字
ctx.font = "20px 微软雅黑";（文字大小）
ctx.textBaseline = "top";（文字位置）
ctx.shadowBlur = 10;（阴影）
ctx.shadowColor="black";（阴影颜色）
ctx.fillText("111111111！", 0, 0);
另外
ctx.beginPath(); 清空缓存的图形（矩形、线条、原型）

以下两个是一起使用，不然报错
ctx.stroke();记录
ctx.closePath();//回到起点
套路：一块整体中，先beginPath开头，closePath结束