HTML5的canvas元素使用JavaScript在网页上绘制图像， canvas拥有多种绘制矩形、路径、圆形、字符以及添加图像的方法。
/* 获取canvas元素 */
let cavsDOM = document.getElementById('canvasId');
let btn = document.getElementById('btn')
/* 创建canvas对象 */
let cavs = cavsDOM.getContext('2d');
/* 绘制一条直线 */
/* 设置开始点 */
/* 距离左边100,距离顶部100的起始点 */
cavs.moveTo(100,100);
/* 距离左边300,距离顶部100的起始点 */
cavs.lineTo(300,100)
/* 起始点 */
cavs.lineTo(200,100)
/* 终点 */
cavs.lineTo(200,350)
cavs.moveTo(200,10);
cavs.lineTo(200,550)
cavs.moveTo(130,50);
cavs.lineTo(40,250)
cavs.moveTo(70,200);
cavs.lineTo(330,200)
/* 设置线条的颜色值 */
cavs.strokeStyle = 'pink';
/* 设置线条的粗细 */
cavs.lineWidth = "10"
/* 把起始点和终点连起来 */
cavs.stroke()
如果需要闭合路径，开始新的起点路径时，都需要创建和关闭路径，开始创建路径： cav.beginPath(); 关闭路径： cav.closePath();
/* cav.fillRect(x,y,width,height) /
/填充矩形 */
/* 距离左边100，距离顶部100，宽300，高200 */
/* 🔺 先设置颜色再填充 */
/* 设置填充颜色 不然默认为黑色 */
cav.fillStyle = '#EF9142'
/* 这里的实际大小不要使用像素来计算 */
cav.fillRect(100,100,300,200);
/* cav.strokeRect(x,y,width,height) /
/绘制矩形边框 */
/* 距离左边100，距离顶部100，宽300，高200 */
/* 先设置颜色和大小 再画矩形 */
cav.strokeStyle = 'red';
cav.lineWidth = 10; cav.strokeRect(100,100,300,200)
/* cav.clearRect(x,y,width,height) 清除矩形区域 */
cav.clearRect(120,120,100,100)
