HTML5(二)——canvas元素

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内容。