HTML5 Canvas 使用教程
HTML5 的 Canvas 元素提供了一种在网页上动态绘制图形的方法。通过 JavaScript，开发者可以在 Canvas 上绘制图像、动画、图表等。本文将详细介绍 Canvas 的使用方法，从基础到高级应用。
目录
- Canvas 简介
- 在 HTML 中使用 Canvas
- 获取绘图上下文
- 基本绘图操作
- 绘制矩形
- 绘制路径和线条
- 绘制圆形和弧线
- 绘图样式
- 颜色与填充
- 线条样式
- 渐变与图案
- 阴影效果
- 图像与文本
- 绘制图像
- 绘制文本
- 动画
- 基本动画原理
- 使用
requestAnimationFrame
- 事件处理
- 鼠标事件
- 键盘事件
- 高级技巧
- 使用路径
- 组合操作与混合模式
- 保存与恢复状态
- 性能优化
- 常用工具与库
- 参考资料
Canvas 简介
Canvas 是 HTML5 中新增的一个元素，允许在网页上通过 JavaScript 动态绘制图形。它适用于游戏开发、数据可视化、图像处理等多种场景。
特点：
- 动态绘制：可以实时更新图形。
- 像素级控制：精确控制每个像素。
- 广泛支持：现代浏览器均支持 Canvas。
在 HTML 中使用 Canvas
首先，在 HTML 文件中添加 Canvas 元素：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Canvas 示例</title> </head> <body> <canvas id="myCanvas" width="800" height="600" style="border:1px solid #000000;"></canvas> <script src="script.js"></script> </body> </html>
属性说明：
id：用于在 JavaScript 中引用 Canvas。width和height：Canvas 的宽度和高度，默认分别为 300 和 150。style：可以通过 CSS 设置 Canvas 的样式，例如边框。
获取绘图上下文
要在 Canvas 上绘图，需要获取绘图上下文（通常是 2D 上下文）。
// script.js // 获取 Canvas 元素 const canvas = document.getElementById('myCanvas'); // 获取 2D 绘图上下文 const ctx = canvas.getContext('2d');
绘图上下文 是一个对象，提供了用于绘制图形的方法和属性。
基本绘图操作
绘制矩形
Canvas 提供了多种绘制矩形的方法：
fillRect(x, y, width, height)：绘制填充矩形。strokeRect(x, y, width, height)：绘制矩形边框。clearRect(x, y, width, height)：清除指定区域。
// 绘制红色填充矩形 ctx.fillStyle = 'red'; ctx.fillRect(50, 50, 200, 100); // 绘制蓝色边框矩形 ctx.strokeStyle = 'blue'; ctx.lineWidth = 5; ctx.strokeRect(300, 50, 200, 100); // 清除区域 ctx.clearRect(60, 60, 50, 50);
绘制路径和线条
使用路径可以绘制复杂的图形和线条。
// 开始新路径 ctx.beginPath(); // 移动到起点 ctx.moveTo(100, 300); // 绘制直线 ctx.lineTo(200, 300); ctx.lineTo(200, 400); ctx.lineTo(100, 400); // 闭合路径 ctx.closePath(); // 设置样式 ctx.fillStyle = 'green'; ctx.fill(); ctx.strokeStyle = 'black'; ctx.lineWidth = 2; ctx.stroke();
绘制圆形和弧线
使用 arc 方法绘制圆形或弧线。
// 绘制完整圆形 ctx.beginPath(); ctx.arc(400, 300, 50,
