JS canvas画图

Posted 2021-01-14 yxtfs17

1. 获取canvas对象的画笔。

　　document.getElementById(" ID名 ").getContext(‘ 2d ‘);

2. 设置画笔属性。

　　.lineWidth = 5;   设置划线宽度为5像素。

　　.strokeStyle = "rgb(250,255,20);    设置画线颜色。

　　.fillStyle = "red"    设置填充颜色。

3. 画矩形

　　.strokeRect(x, y, w, h);     画矩形框

　　.fillRect(x, y, w, h);            画矩形面

4. 路径画图。

　　.beginPath()                 开始路径定义

　　.closePath()                 闭合路径（使首尾相连）

　　.fill()                              填充

　　.stroke()                       划线

 

　　.moveTo(x, y)              移动画笔到（x,  y）

　　lineTo(x, y)                  从当前位置划线至（x, y）

　　arc(x, y, r, s, e, b)        画弧（xy坐标，r半径， s e开始与结束角度， b 划线方向 true为逆时针）

5. 清除画面内容。

　　.clearRect(x,y,w,h)      擦除矩形中的内容