hello,我是贝格前端工场,最近在学习canvas,分享一些canvas的一些知识点笔记,本期分享canvas绘制图形的知识,欢迎老铁们一同学习,欢迎关注,如有前端项目可以私信贝格。
Canvas是HTML5中的一个绘图API,可以用来绘制各种基本形状。以下是一些常见的基本形状的绘制方法:
矩形(Rectangle)
- 绘制填充矩形:context.fillRect(x, y, width, height)
- 绘制边框矩形:context.strokeRect(x, y, width, height)
- 清除矩形区域:context.clearRect(x, y, width, height)
圆形(Circle)
- 绘制填充圆形:context.arc(x, y, radius, startAngle, endAngle, anticlockwise),然后调用context.fill()
- 绘制边框圆形:context.arc(x, y, radius, startAngle, endAngle, anticlockwise),然后调用context.stroke()
线段(Line)
- 绘制直线:context.moveTo(x1, y1),然后调用context.lineTo(x2, y2),最后调用context.stroke()
多边形(Polygon)
- 绘制填充多边形:先使用context.moveTo(x1, y1)移动到起始点,然后使用context.lineTo(x2, y2)连接到下一个点,最后调用context.closePath()和context.fill()
- 绘制边框多边形:先使用context.moveTo(x1, y1)移动到起始点,然后使用context.lineTo(x2, y2)连接到下一个点,最后调用context.closePath()和context.stroke()
椭圆(Ellipse)
- 绘制填充椭圆:使用context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise),然后调用context.fill()
- 绘制边框椭圆:使用context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise),然后调用context.stroke()
椭圆弧(Elliptical Arc):
- 绘制填充椭圆弧:使用context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise),然后调用context.fill()
- 绘制边框椭圆弧:使用context.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise),然后调用context.stroke()
扇形(Sector)
- 绘制填充扇形:使用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()
梯形(Trapezoid)
- 绘制填充梯形:使用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)方法用于绘制二次贝塞尔曲线,使用方法类似。