HTML5 <canvas> 元素
HTML5 还引入了 元素，允许在网页中动态绘制图形、动画和其他视觉效果。结合 JavaScript，可以用来绘制图形、处理图像、生成图表等。接下来将简要介绍canvas的使用。
基本语法
<canvas id="myCanvas" width="300" height="150"></canvas>
- 该元素本身不显示任何内容，只是一个容器，用来承载由 JavaScript 绘制的内容。
- 用id给
<canvas>元素一个唯一的标识符，以便后续通过 JavaScript 获取元素。 - 用
width和height定义画布的宽度和高度。如果不设置，默认宽度为 300 像素，高度为 150 像素。
获取上下文 (Context)
在 <canvas> 中绘制图形时，需要获取一个“绘图上下文”（Context），它是实际绘制的工具。最常用的上下文是 2D 上下文。
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
getContext("2d")：返回一个用于绘制 2D 图形的上下文对象。- 对于 3D 绘制，可以使用
getContext("webgl")。
常用绘制操作
1. 矩形
// 填充矩形
ctx.fillStyle = "blue"; // 设置填充颜色
ctx.fillRect(10, 10, 150, 100); // 绘制一个蓝色矩形// 绘制边框矩形
ctx.strokeStyle = "red"; // 设置边框颜色
ctx.lineWidth = 5; // 设置边框宽度
ctx.strokeRect(200, 10, 150, 100); // 绘制一个红色边框矩形
fillRect(x, y, width, height)：绘制并填充一个矩形。strokeRect(x, y, width, height)：绘制一个矩形的边框。fillStyle：设置填充颜色。strokeStyle：设置边框颜色。
2. 路径
// 开始绘制路径
ctx.beginPath();
ctx.moveTo(50, 50); // 起点 (50, 50)
ctx.lineTo(200, 50); // 绘制到 (200, 50)
ctx.lineTo(200, 100); // 绘制到 (200, 100)
ctx.closePath(); // 关闭路径
ctx.strokeStyle = "green"; // 设置路径颜色
ctx.lineWidth = 3; // 设置路径宽度
ctx.stroke(); // 绘制路径
beginPath()：开始一个新的路径。moveTo(x, y)：设置路径的起始点。lineTo(x, y)：绘制一条从当前点到指定点的直线。closePath()：关闭当前路径，将最后一个点连接到起始点。stroke()：绘制路径。lineWidth：设置线条宽度。
3. 圆形
ctx.beginPath();
ctx.arc(150, 75, 50, 0, 2 * Math.PI); // (x, y, radius, startAngle, endAngle)
ctx.fillStyle = "orange"; // 设置填充颜色
ctx.fill(); // 填充圆形
ctx.stroke(); // 绘制圆形边框
arc(x, y, radius, startAngle, endAngle)：绘制圆形或弧形。x,y：圆心的坐标。radius：圆的半径。startAngle和endAngle：弧的起始角度和结束角度，使用弧度制（2 * Math.PI表示一个完整的圆）。
fill()：填充圆形。stroke()：绘制圆形边框。
4. 文本
ctx.font = "30px Arial"; // 设置字体
ctx.fillStyle = "black"; // 设置填充颜色
ctx.fillText("Hello, Canvas!", 50, 100); // 绘制填充文本ctx.strokeStyle = "red"; // 设置文本边框颜色
ctx.lineWidth = 2; // 设置文本边框宽度
ctx.strokeText("Hello!", 50, 150); // 绘制文本的边框
font：设置字体大小和字体类型。fillText(text, x, y)：绘制填充文本。strokeText(text, x, y)：绘制文本的边框。fillStyle：设置文本填充颜色。strokeStyle：设置文本边框颜色。
清除画布内容
有时候我们需要清除画布上的某些部分，可以使用 clearRect() 方法。
ctx.clearRect(10, 10, 100, 100); // 清除画布上的矩形区域
clearRect(x, y, width, height)：清除画布指定区域的内容。
图像处理
通过 drawImage() 方法在 <canvas> 上绘制图像。
var img = new Image();
img.src = "image.jpg"; // 设置图片路径img.onload = function() {ctx.drawImage(img, 0, 0); // 将图片绘制到画布上，坐标 (0, 0)
};
drawImage(image, x, y)：将图片绘制到画布上的指定位置。image可以是图像对象、视频元素、或者其他 canvas 元素。
动画效果
通过使用 requestAnimationFrame()实现平滑的动画效果。结合 clearRect() 和图形绘制方法，可以实现动态动画。
var x = 0;function animate() {ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布ctx.fillStyle = "blue";ctx.fillRect(x, 50, 100, 100); // 绘制一个矩形x += 2; // 每帧移动矩形的位置if (x > canvas.width) {x = -100; // 重置位置}requestAnimationFrame(animate); // 请求下一帧动画
}animate(); // 启动动画
requestAnimationFrame()：在浏览器下一次重绘之前调用指定的回调函数，用于创建动画效果。
总结
canvas的优点
- 动态和实时渲染，可以实现实时绘图和更新，适合需要频繁改变内容的场景，例如动画、视频编辑工具和数据图表。
- 跨平台兼容性，直接基于 HTML和 JavaScript，Canvas 图形可以在任何支持现代浏览器的设备上运行，无需专门适配。
- 绘制能力强大，可绘画矩形、圆形等，还能处理过渡、动画等效果。
缺点
- 操作复杂度高，需要手动通过底层绘图 API绘制图形。
- Canvas 的内容是绘制在图形缓冲区中，缺乏对文本的 DOM 操作能力，不能像普通HTML 元素那样轻松处理文本或表单。
- Canvas 中的内容不可被搜索引擎索引，因为它是图形渲染，不生成 DOM 元素或 HTML内容。