hello，我是贝格前端工场，最近在学习canvas，分享一些canvas的一些知识点笔记，本期分享canvas绘制图形的知识，欢迎老铁们一同学习，欢迎关注，如有前端项目可以私信贝格。

Canvas是HTML5中的一个绘图API，可以用来绘制各种基本形状。以下是一些常见的基本形状的绘制方法：

绘制填充矩形：context.fillRect(x, y, width, height)

绘制边框矩形：context.strokeRect(x, y, width, height)

清除矩形区域：context.clearRect(x, y, width, height)

绘制填充圆形：context.arc(x, y, radius, startAngle, endAngle, anticlockwise)，然后调用context.fill()

绘制边框圆形：context.arc(x, y, radius, startAngle, endAngle, anticlockwise)，然后调用context.stroke()

绘制直线：context.moveTo(x1, y1)，然后调用context.lineTo(x2, y2)，最后调用context.stroke()

绘制填充多边形：先使用context.moveTo(x1, y1)移动到起始点，然后使用context.lineTo(x2, y2)连接到下一个点，最后调用context.closePath()和context.fill()

绘制边框多边形：先使用context.moveTo(x1, y1)移动到起始点，然后使用context.lineTo(x2, y2)连接到下一个点，最后调用context.closePath()和context.stroke()

绘制填充椭圆：使用context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)，然后调用context.fill()

绘制边框椭圆：使用context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)，然后调用context.stroke()

绘制填充椭圆弧：使用context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)，然后调用context.fill()

绘制边框椭圆弧：使用context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)，然后调用context.stroke()

绘制填充扇形：使用context.arc(x, y, radius, startAngle, endAngle, anticlockwise)，然后调用context.lineTo(x, y)和context.closePath()，最后调用context.fill()

绘制边框扇形：使用context.arc(x, y, radius, startAngle, endAngle, anticlockwise)，然后调用context.lineTo(x, y)和context.closePath()，最后调用context.stroke()

绘制填充梯形：使用context.moveTo(x1, y1)移动到起始点，然后使用context.lineTo(x2, y2)连接到下一个点，再使用context.lineTo(x3, y3)连接到下一个点，最后调用context.closePath()和context.fill()

绘制边框梯形：使用context.moveTo(x1, y1)移动到起始点，然后使用context.lineTo(x2, y2)连接到下一个点，再使用context.lineTo(x3, y3)连接到下一个点，最后调用context.closePath()和context.stroke()

绘制贝塞尔曲线需要使用到Canvas的context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)方法。这个方法需要传入三对控制点的坐标和终点的坐标，用来确定曲线的形状。

具体步骤如下：

使用context.moveTo(x1, y1)移动到曲线的起始点。

使用context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)绘制贝塞尔曲线，其中(cp1x, cp1y)和(cp2x, cp2y)是第一对和第二对控制点的坐标，(x, y)是曲线的终点坐标。

调用context.stroke()或context.fill()来绘制曲线的边框或填充。

下面是一个绘制贝塞尔曲线的示例代码：

解释var canvas = document.getElementById('myCanvas');var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(50, 50); // 起始点context.bezierCurveTo(100, 100, 200, 100, 250, 50); // 第一对控制点，第二对控制点，终点context.stroke();

在上面的示例中，我们使用context.moveTo(50, 50)移动到起始点，然后使用context.bezierCurveTo(100, 100, 200, 100, 250, 50)绘制贝塞尔曲线，最后调用context.stroke()来绘制曲线的边框。

你可以根据需要调整控制点和终点的坐标来改变曲线的形状。同时，Canvas还提供了context.quadraticCurveTo(cp1x, cp1y, x, y)方法用于绘制二次贝塞尔曲线，使用方法类似。