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