【创建canvas标签】

<canvas id="myCanvas" width="500" height="500"></canvas>

【初始化画布】

let ctx = document.getElementById("myCanvas")
ctx = ctx.getContext("2d")

【矩形】

//CSS颜色,渐变,或图案,默认设置是#000000（黑色）
ctx.fillStyle = "pink";
//x-横坐标 y-纵坐标 w-宽 h-高
ctx.fillRect(x,y,w,h)

【路径】

//路径颜色 (选填，默认黑色)
ctx.strokeStyle = "red"
//路径线宽 (选填，默认为1.0)
ctx.lineWidth = 1
//虚线路径 solidLineLength-实线长度 clearance-间隙长度 (选填)
ctx.setLineDash([solidLineLength,clearance])
//定义开始坐标 startX-横坐标 startY-纵坐标 (必填)
ctx.moveTo(startX,startY);
//定义开始坐标 endX-横坐标 endY-纵坐标 (必填)
ctx.lineTo(endX,endY);
//绘制线条(必填)
ctx.stroke();

【圆形】

Tip： strokeStyle 、lineWidth 、setLineDash 这几个属性与路径相同

//开始路径 (必填)
ctx.beginPath()
//圆路径 x-横坐标 y-纵坐标 radius-圆半径 (必填)
ctx.arc(x,y,radius,0,2*Math.PI)
//绘制线条(必填)
ctx.stroke()

【文字】

Tip： fillStyle 这几个属性与矩形相同

//文字对齐方式 start、end、center、left、right(选填)
ctx.textAlign = "start"
//设置字体和尺寸 (必填)
ctx.font = "30px Arial";
//填充文字 x-横坐标 y-纵坐标 (必填)
ctx.fillText("Hello",x,y);

【图片】

//插入图片 img-图片地址 x-横坐标 y-纵坐标 w-宽 h-高 (选填)
ctx.drawImage(img,x,y,w,h)

封装的组件：https://download.csdn.net/download/qq812457115/85564165