使用Canvas绘制图形(矩形/圆形/线条/文字)
要使用Canvas绘制图形，首先需要在HTML文件中创建一个Canvas元素，然后使用JavaScript来操作Canvas上的绘图上下文。以下是绘制简单图形的基本步骤：1. 在HTML文件中添加一个Canvas元素：
<canvas id="myCanvas" width="500" height="500"></canvas>
2. 使用JavaScript获取Canvas对象和绘图上下文：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
3. 绘制图形：
- 绘制矩形：
// 填充矩形
ctx.fillStyle = 'blue';// 设置填充颜色
ctx.fillRect(x, y, width, height);// 绘制填充矩形
// 绘制边框矩形
ctx.strokeStyle = 'red';// 设置边框颜色
ctx.strokeRect(x, y, width, height);// 绘制边框矩形
- 绘制圆形：
ctx.beginPath();// 开始绘制路径
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);// 绘制圆弧
ctx.fillStyle = 'green';// 设置填充颜色
ctx.fill();// 填充圆形
ctx.stroke();// 绘制圆形边框
- 绘制线条：
ctx.beginPath();// 开始绘制路径
ctx.moveTo(x1, y1);// 移动到起始点
ctx.lineTo(x2, y2);// 连接到结束点
ctx.strokeStyle = 'purple';// 设置线条颜色
ctx.stroke();// 绘制线条
- 绘制文字：
ctx.font = '20px Arial';// 设置字体样式和大小
ctx.fillStyle = 'black';// 设置文字颜色
ctx.fillText('Hello!', x, y);// 填充文字
以上示例中的参数需要根据实际情况进行适当调整。您可以使用Canvas的其他方法和属性来绘制更复杂的图形，例如渐变、阴影等。请参考Canvas API文档以获取更多信息。
页:
[1]