HTML5 Canvas绘图，如何通过基础实例代码掌握图形绘制技巧？

HTML5 Canvas基础绘图实例代码集合包括绘制矩形、圆形等基本图形，以及实现动画效果的示例。

绘制直线

在HTML5中，使用Canvas API的beginPath(),moveTo(x, y) 和lineTo(x, y) 方法可以绘制直线，以下是一个示例代码：

 const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // 开始路径 ctx.beginPath(); // 移动到起点 (100, 50) ctx.moveTo(100, 50); // 绘制直线到终点 (300, 100) ctx.lineTo(300, 100); // 描边路径 ctx.stroke();

绘制矩形

使用fillRect(x, y, width, height) 和strokeRect(x, y, width, height) 方法可以分别绘制填充矩形和边框矩形，以下是示例代码：

 // 填充矩形 ctx.fillRect(50, 50, 150, 100); // 边框矩形 ctx.strokeRect(200, 50, 150, 100);

绘制圆形与弧线

使用arc(x, y, radius, startAngle, endAngle, anticlockwise) 方法可以绘制圆弧或部分圆，以下是示例代码：

 // 完整圆 ctx.beginPath(); ctx.arc(250, 150, 50, 0, Math.PI * 2); // 0到2π代表整个圆 ctx.fill(); // 圆弧 ctx.beginPath(); ctx.arc(400, 150, 50, 0, Math.PI, true); // 绘制半圆，逆时针方向 ctx.stroke();

绘制路径

使用quadraticCurveTo(cpX, cpY, x, y) 和bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, x, y) 方法可以分别绘制二次贝塞尔曲线和三次贝塞尔曲线，以下是示例代码：

 // 二次贝塞尔曲线 ctx.beginPath(); ctx.moveTo(100, 200); ctx.quadraticCurveTo(200, 250, 250, 250); ctx.stroke(); // 三次贝塞尔曲线 ctx.beginPath(); ctx.moveTo(400, 200); ctx.bezierCurveTo(400, 100, 500, 100, 500, 200); ctx.stroke();

绘制与填充文本

使用fillText(text, x, y [, maxWidth]) 和strokeText(text, x, y [, maxWidth]) 方法可以在指定位置绘制填充文本和文本轮廓，以下是示例代码：

 // 设置字体样式和对齐方式 ctx.font = '36px sansserif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; // 绘制填充文本 ctx.fillText('Hello, Canvas!', canvas.width / 2, canvas.height / 2);

常见问题解答（FAQs）

{: # 绘制直线的起始点和结束点坐标如何确定？

在HTML5 Canvas中，通过moveTo(x, y)方法设置直线的起点坐标，然后通过lineTo(x, y)方法设置直线的终点坐标。moveTo(100, 50)将起点设为(100, 50)，而lineTo(300, 100)则将终点设为(300, 100)。}

{: # 如何在Canvas上绘制渐变线条？

在Canvas中，可以使用createLinearGradient()或createRadialGradient()方法创建线性渐变或径向渐变，首先定义渐变的起点、终点和颜色stops，然后将渐变应用到strokeStyle属性上。

 var gradient = ctx.createLinearGradient(0, 0, 200, 0); gradient.addColorStop(0, 'red'); gradient.addColorStop(1, 'blue'); ctx.strokeStyle = gradient; ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(210, 10); ctx.stroke(); ```}