HTML5 Canvas 是一个非常强大的功能，允许开发者通过 JavaScript 在网页上动态绘制图形、动画和其它视觉内容。它是一种基于位图的画布，在上面可以用程序化的方法进行绘制。
1. 基础语法
要使用 Canvas，首先需要在 HTML 中定义 <canvas> 元素：
<canvas id="myCanvas" width="500" height="400"></canvas>
然后，可以使用 JavaScript 获取这个画布及其上下文进行绘制：
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d"); // 2D上下文
2. 常见的绘制方法
2.1 绘制矩形
- 填充矩形：
ctx.fillStyle = "blue"; // 填充颜色 ctx.fillRect(50, 50, 150, 100); // 绘制矩形 - 描边矩形：
ctx.strokeStyle = "red"; // 描边颜色 ctx.strokeRect(50, 50, 150, 100); // 绘制矩形边框 - 清除矩形区域：
ctx.clearRect(60, 60, 130, 80); // 清除矩形区域
2.2 绘制路径
ctx.beginPath(); // 开始路径
ctx.moveTo(100, 100); // 移动到起点
ctx.lineTo(200, 100); // 画线到新点
ctx.lineTo(200, 200); // 继续画线到新点
ctx.closePath(); // 回到起点
ctx.stroke(); // 描边路径
2.3 绘制圆形
ctx.beginPath();
ctx.arc(150, 150, 50, 0, Math.PI * 2); // 圆心(150,150)，半径为50
ctx.fill(); // 填充圆形
2.4 绘制文本
ctx.font = "20px Arial"; // 设置字体大小和字体
ctx.fillStyle = "green";
ctx.fillText("Hello, Canvas!", 50, 50); // 绘制文本
3. 图像处理
可以在 Canvas 上绘制图像：
var img = new Image();
img.src = 'path/to/image.jpg';
img.onload = function() {
ctx.drawImage(img, 10, 10, 100, 100); // 绘制图像
};
4. 动画效果
通过 requestAnimationFrame 创建动画效果：
var x = 0; // 开始位置
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
ctx.fillStyle = "blue";
ctx.fillRect(x, 50, 50, 50); // 绘制矩形
x += 2; // 更新位置
if (x < canvas.width) {
requestAnimationFrame(animate); // 递归调用
}
}
animate(); // 启动动画
5. 应用场景
- 游戏开发：可以使用 Canvas 绘制图像、精灵、动画及其交互。
- 数据可视化：可以绘制图表或图形以展示数据，比如条形图、折线图等。
- 图像编辑：实现简单的图像处理工具，如涂鸦或图形合成。
- 动态图形展示：展示动态效果和视觉作品。
6. 注意事项
- 性能：Canvas 是基于像素的，处理大量的图形和动画时可能会导致性能下降，需优化绘制逻辑。
- 无状态：Canvas 的绘制是即时的，不会保存任何状态，因此需要显式地绘制每一帧。
- 无内建事件处理：Canvas 不支持直接的事件处理，需通过 JavaScript 自行处理鼠标和键盘事件。
HTML5 Canvas 提供了灵活强大的绘图能力，开发者可以利用它创建丰富的用户体验。
