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) 擦除矩形中的内容
JS ?canvas画图
原文地址：https://www.cnblogs.com/yxtfs17/p/9838099.html