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, 