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();
```}