canvas绘制简单图形

三角形

首先简单的画个三角形

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext("2d");
ctx.fillStyle = "pink"
ctx.beginPath()
ctx.moveTo(250, 0)
ctx.lineTo(0, 500)
ctx.lineTo(500, 500)
ctx.closePath()
ctx.stroke()
ctx.fill()

好了， 现在你已经学会canvas了

圆

//arc(x，y， r， startDeg， endEnd， 顺时钟)
ctx.arc(250, 250, 240, 0, 2 * Math.PI, false)
ctx.stroke()

圆弧

//(250, 0) -> (250, 250) 这条线 (250, 250) -> (0, 250) 这条线， 两条线为切线的圆弧
ctx.beginPath();
ctx.moveTo(0, 0)
ctx.lineTo(250, 0);
ctx.arcTo(250, 250, 0, 250, 250);
ctx.lineTo(0, 0)
ctx.stroke();

贝塞尔曲线

ctx.moveTo(0, 0)//起始点
ctx.quadraticCurveTo(250, 0, 500, 500)//控制点与终点
ctx.stroke()