HTML5 的 <canvas> 元素是一个非常强大的工具，用于在网页上动态绘制图形。它允许开发者使用 JavaScript 创建图形、动画、游戏和其他视觉效果。以下是关于 HTML5 Canvas 的详细信息：
1. <canvas> 元素
<canvas> 元素是一个容器，用于在网页上绘制图形。它没有默认的图形内容，必须通过 JavaScript 来绘制内容。
基本结构：
<canvas id="myCanvas" width="500" height="400"></canvas>
2. 获取 Canvas 上下文
要在 <canvas> 元素上绘制内容，首先需要获取一个绘图上下文。最常用的上下文类型是 2d。
示例代码：
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
3. 绘制基本图形
绘制矩形
// 填充矩形
ctx.fillStyle = 'blue'; // 填充颜色
ctx.fillRect(50, 50, 200, 100); // x, y, width, height
// 描边矩形
ctx.strokeStyle = 'red'; // 描边颜色
ctx.strokeRect(100, 100, 150, 150); // x, y, width, height
绘制圆形
ctx.beginPath(); // 开始路径
ctx.arc(250, 200, 100, 0, Math.PI * 2, false); // x, y, radius, startAngle, endAngle, counterclockwise
ctx.fillStyle = 'green';
ctx.fill(); // 填充圆形
ctx.strokeStyle = 'black';
ctx.stroke(); // 描边圆形
绘制线条
ctx.beginPath();
ctx.moveTo(50, 50); // 起始点
ctx.lineTo(200, 50); // 结束点
ctx.lineWidth = 5; // 线条宽度
ctx.strokeStyle = 'purple'; // 线条颜色
ctx.stroke(); // 绘制线条
4. 绘制文本
ctx.font = '30px Arial'; // 字体样式
ctx.fillStyle = 'black'; // 文本颜色
ctx.fillText('Hello Canvas!', 50, 150); // 文本内容, x, y
ctx.strokeStyle = 'red'; // 描边颜色
ctx.lineWidth = 1;
ctx.strokeText('Outlined Text', 50, 200); // 描边文本
5. 使用路径
路径允许绘制复杂的形状和图案。
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(150, 200);
ctx.closePath(); // 关闭路径，自动连接到起始点
ctx.fillStyle = 'orange';
ctx.fill(); // 填充路径
ctx.stroke(); // 描边路径
6. 图像处理
绘制图像
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0, 100, 100); // 绘制图像到 canvas 上
};
img.src = 'path/to/image.jpg'; // 图像路径
图像裁剪
ctx.drawImage(img, 0, 0, 100, 100, 50, 50, 200, 200); // 图像裁剪和绘制
7. 动画
使用 requestAnimationFrame 实现动画效果：
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
// 绘制图形代码...
requestAnimationFrame(animate); // 继续下一帧动画
}
animate();
8. 图形合成
Canvas 支持多种合成操作，可以控制如何将新的图形合成到已有图形上：
ctx.globalAlpha = 0.5; // 设置透明度
ctx.globalCompositeOperation = 'source-over'; // 合成操作模式
9. 导出和保存 Canvas 内容
将 Canvas 内容导出为图像或下载：
var dataURL = canvas.toDataURL(); // 将 Canvas 转换为图像数据 URL
var link = document.createElement('a');
link.href = dataURL;
link.download = 'canvas-image.png';
link.click(); // 下载图像
10. 高级功能
- 像素操作：使用
getImageData和putImageData方法处理像素数据。 - 变换：使用
translate,rotate, 和scale方法进行图形变换。
示例代码：
ctx.translate(100, 100); // 平移
ctx.rotate(Math.PI / 4); // 旋转
ctx.scale(1.5, 1.5); // 缩放
总结
HTML5 Canvas 是一个非常强大的图形绘制工具，适用于从简单的图形到复杂的动画和游戏开发。通过掌握 Canvas API，你可以创建丰富的视觉效果和互动体验。