使用Canvas绘制图形(矩形/圆形/线条/文字)

能者

要使用Canvas绘制图形，首先需要在HTML文件中创建一个Canvas元素，然后使用JavaScript来操作Canvas上的绘图上下文。以下是绘制简单图形的基本步骤：

1. 在HTML文件中添加一个Canvas元素：

[HTML] 纯文本查看 复制代码

<canvas id="myCanvas" width="500" height="500"></canvas>

2. 使用JavaScript获取Canvas对象和绘图上下文：

[JavaScript] 纯文本查看 复制代码

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

3. 绘制图形：
- 绘制矩形：

[JavaScript] 纯文本查看 复制代码

// 填充矩形
ctx.fillStyle = 'blue';  // 设置填充颜色
ctx.fillRect(x, y, width, height);  // 绘制填充矩形

// 绘制边框矩形
ctx.strokeStyle = 'red';  // 设置边框颜色
ctx.strokeRect(x, y, width, height);  // 绘制边框矩形

- 绘制圆形：

[JavaScript] 纯文本查看 复制代码

ctx.beginPath();  // 开始绘制路径
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);  // 绘制圆弧
ctx.fillStyle = 'green';  // 设置填充颜色
ctx.fill();  // 填充圆形
ctx.stroke();  // 绘制圆形边框

- 绘制线条：

[JavaScript] 纯文本查看 复制代码

ctx.beginPath();  // 开始绘制路径
ctx.moveTo(x1, y1);  // 移动到起始点
ctx.lineTo(x2, y2);  // 连接到结束点
ctx.strokeStyle = 'purple';  // 设置线条颜色
ctx.stroke();  // 绘制线条

- 绘制文字：

[JavaScript] 纯文本查看 复制代码

ctx.font = '20px Arial';  // 设置字体样式和大小
ctx.fillStyle = 'black';  // 设置文字颜色
ctx.fillText('Hello!', x, y);  // 填充文字

以上示例中的参数需要根据实际情况进行适当调整。您可以使用Canvas的其他方法和属性来绘制更复杂的图形，例如渐变、阴影等。请参考Canvas API文档以获取更多信息。