掌握创意之钥：全面解析HTML5 Canvas

在数字时代，表达创意的方式多种多样，而 HTML5 中的 <canvas> 元素无疑为网页开发者提供了一个强大的工具箱。无论你是想要创建动态图表、互动游戏还是复杂的可视化应用，掌握 Canvas 的基本用法都是迈向成功的关键一步。本文将带你一步步了解如何开始使用 Canvas，并通过多个实例展示其强大功能。

一、Canvas 元素基础

1、创建 Canvas 元素

在 HTML 中，<canvas> 元素是一个容器，用于在网页中进行动态绘图。它本身并不会显示任何内容，只有通过 JavaScript 操作才能渲染图形。

<canvas id="myCanvas" width="500" height="400"></canvas>

在上述代码中，我们创建了一个宽度为 500 像素，高度为 400 像素的 <canvas> 元素。如果未指定 width 和 height 属性，Canvas 会默认具有 300px 宽和 150px 高。但是，实际应用中，我们通常会为 Canvas 指定明确的宽高值。

需要特别注意的是，Canvas 本身是透明的，它不会自动显示任何内容。您必须使用 JavaScript 代码在 Canvas 上绘制图形、文本或其他内容。

2、获取上下文（Context）

要在 Canvas 上进行绘制操作，我们需要通过 JavaScript 获取一个"绘图上下文"（Context）。上下文是执行绘图命令的环境，它有不同的类型，最常用的是 2d，即二维绘图上下文。

获取 Canvas 上下文的代码如下：

const canvas = document.getElementById('myCanvas');  // 获取 Canvas 元素
const ctx = canvas.getContext('2d');  // 获取二维绘图上下文

• getContext('2d')：这个方法返回一个 2D 渲染上下文对象（ctx），可以使用该对象来绘制形状、图像、文本等。
• 其他类型的上下文（例如 webgl，用于 3D 图形）可以用于更高级的绘制操作，但在基础使用中，2d 是最常用的。

ctx 对象提供了大量的方法和属性，用于操作和绘制不同的图形元素。例如，您可以使用 ctx.beginPath() 来开始一个绘制路径，使用 ctx.fillRect() 绘制矩形，使用 ctx.arc() 绘制圆形等等。简言之，所有的绘图操作都需要依赖于 ctx 对象。

二、绘制基本形状

1、绘制矩形

矩形是绘图中最常见的基本形状之一。在 Canvas 中，可以通过 fillRect() 方法绘制填充矩形，或通过 strokeRect() 绘制空心矩形（描边矩形）。这两个方法的参数均为矩形的 x, y 坐标 （矩形左上角的位置）、宽度 和高度。

• fillRect(x, y, width, height)：绘制一个填充矩形，矩形的填充颜色由 fillStyle 控制。
• strokeRect(x, y, width, height)：绘制一个空心矩形，矩形的描边颜色由 strokeStyle 控制。

// 绘制一个填充的矩形
ctx.fillStyle = 'blue';  // 设置填充颜色
ctx.fillRect(50, 50, 200, 100);  // 绘制矩形，左上角坐标(50, 50)，宽200px，高100px

// 绘制一个空心矩形
ctx.strokeStyle = 'red';  // 设置描边颜色
ctx.lineWidth = 5;        // 设置描边宽度为5px
ctx.strokeRect(100, 150, 200, 100);  // 绘制矩形，左上角坐标(100, 150)，宽200px，高100px

补充说明：

• fillStyle 和 strokeStyle 属性决定了填充和描边的颜色或渐变效果。
• lineWidth 用于设置描边的线条宽度。
• 通过 fillRect() 和 strokeRect()，您可以控制矩形的大小、位置、颜色和边框等。

2、绘制圆形

Canvas 中绘制圆形或弧形，主要是通过 arc() 方法来实现。arc() 方法不仅可以绘制完整的圆，还可以绘制部分圆弧。该方法的参数包括圆心的坐标、半径、起始角度、结束角度以及旋转方向。

// 绘制一个圆形
ctx.beginPath();  // 开始新的路径
ctx.arc(250, 250, 100, 0, Math.PI * 2);  // 绘制圆心为(250, 250)，半径100的圆，起始角度0，结束角度 2π（即完整圆）
ctx.fillStyle = 'green';  // 设置填充颜色为绿色
ctx.fill();  // 填充路径，即绘制圆形

// 绘制圆形的边框
ctx.lineWidth = 5;  // 设置描边宽度为5px
ctx.strokeStyle = 'orange';  // 设置边框颜色为橙色
ctx.stroke();  // 绘制圆形的边框

补充说明：

• arc(x, y, radius, startAngle, endAngle)：x 和 y 定义圆心的位置，radius 是圆的半径，startAngle 和 endAngle 定义弧形的起始和结束角度（单位是弧度，1 圈为 Math.PI * 2）。
• fill() 用于填充路径，而 stroke() 用于描边路径，您可以同时使用这两个方法来创建既有填充又有边框的圆形。
• 可以通过调整 lineWidth 和 strokeStyle，来改变圆形边框的宽度和颜色。

3、弧形绘制

除了绘制完整的圆形，您还可以利用 arc() 绘制 弧形，即圆的一部分。

// 绘制一个弧形
ctx.beginPath();
ctx.arc(250, 250, 100, Math.PI / 4, Math.PI * 3 / 4);  // 从 45° 到 135° 绘制一个弧形
ctx.lineWidth = 5;
ctx.strokeStyle = 'blue';
ctx.stroke();  // 描边弧形

绘制了一个从 45° 到 135° 的弧，Math.PI / 4 是起始角度（45°），Math.PI * 3 / 4 是结束角度（135°）。这样您可以灵活控制绘制的弧形部分。

4、绘制线条

绘制线条通常是通过 Canvas 中的路径机制来实现的。在绘制线条之前，我们需要调用 beginPath() 来开始一个新的路径，使用 moveTo() 设置起点坐标，再通过 lineTo() 设置终点坐标，最后调用 stroke() 来描边路径。

简单的直线

ctx.beginPath();  // 开始路径
ctx.moveTo(50, 300);  // 设置起点 (50, 300)
ctx.lineTo(450, 300);  // 设置终点 (450, 300)
ctx.strokeStyle = 'purple';  // 设置描边颜色为紫色
ctx.lineWidth = 3;  // 设置线条宽度为 3px
ctx.stroke();  // 绘制线条

详细说明：

• beginPath()：开始新的路径，确保前面的路径不被干扰。
• moveTo(x, y)：将路径的起点设置为指定的坐标（x, y），不会绘制线条，只是移动到该位置。
• lineTo(x, y)：从当前位置绘制一条直线到指定的坐标（x, y）。
• stroke()：描边当前路径，将其显示在 Canvas 上，默认情况下使用黑色，除非通过 strokeStyle 设置了颜色。

曲线和其他线条

Canvas 还可以绘制其他类型的曲线，如贝塞尔曲线。下面是一个绘制二次贝塞尔曲线的例子：

ctx.beginPath();
ctx.moveTo(50, 300);  // 起点
ctx.quadraticCurveTo(250, 100, 450, 300);  // 二次贝塞尔曲线，控制点(250, 100)，终点(450, 300)
ctx.strokeStyle = 'blue';
ctx.lineWidth = 3;
ctx.stroke();  // 描边

• quadraticCurveTo(cp1x, cp1y, x, y)：绘制一条二次贝塞尔曲线，控制点为 (cp1x, cp1y)，终点为 (x, y)。

通过类似的方式，您还可以使用 bezierCurveTo() 绘制三次贝塞尔曲线，或通过 arcTo() 绘制圆角路径。

5、绘制多边形

绘制多边形的核心在于通过多次调用 lineTo() 来连接每个顶点。可以使用 closePath() 方法将路径封闭，从而形成一个完整的多边形。如果需要填充颜色，可以调用 fill() 方法。

绘制三角形

ctx.beginPath();
ctx.moveTo(200, 100);  // 设置起点
ctx.lineTo(300, 100);  // 连接第二个顶点
ctx.lineTo(250, 200);  // 连接第三个顶点
ctx.closePath();  // 关闭路径，自动回到起点
ctx.stroke();  // 绘制边框
ctx.fillStyle = 'yellow';  // 设置填充颜色
ctx.fill();  // 填充颜色

详细说明：

• moveTo(x, y)：设置多边形的起点。
• lineTo(x, y)：通过多个调用 lineTo() 来连接多边形的各个顶点。
• closePath()：将路径从当前终点返回到起点，从而封闭路径。
• stroke()：描边路径，绘制多边形的轮廓。
• fill()：填充路径内部区域，使用 fillStyle 设置填充颜色。

绘制五边形

如果您想绘制一个规则的五边形，可以通过计算顶点的坐标，然后依次连接每个顶点来绘制。下面是一个五边形的例子：

const centerX = 250;
const centerY = 250;
const radius = 100;  // 五边形的半径

ctx.beginPath();
ctx.moveTo(centerX + radius, centerY);  // 从五边形的第一个顶点开始

for (let i = 1; i < 5; i++) {
  const angle = i * (Math.PI * 2 / 5);  // 计算每个角度
  const x = centerX + radius * Math.cos(angle);  // 计算 x 坐标
  const y = centerY + radius * Math.sin(angle);  // 计算 y 坐标
  ctx.lineTo(x, y);  // 连接每个顶点
}

ctx.closePath();  // 关闭路径，连接最后一个顶点与起点
ctx.stroke();  // 绘制五边形的边框
ctx.fillStyle = 'cyan';  // 设置填充颜色为青色
ctx.fill();  // 填充五边形

补充说明：

• 为了绘制规则的多边形，我们通过计算顶点的位置。角度使用弧度表示，因此使用 Math.PI * 2 / 5 来计算每个顶点的角度。
• Math.cos(angle) 和 Math.sin(angle) 用于计算每个顶点的坐标。

三、图形样式

1、颜色和透明度

ctx.fillStyle = 'rgba(255, 0, 0, 0.5)'; // 半透明红色
ctx.strokeStyle = 'rgb(0, 0, 255)'; // 蓝色

2、渐变

可以使用线性渐变或径向渐变。

const gradient = ctx.createLinearGradient(0, 0, 100, 100);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(100, 100, 100, 100);

3、阴影

设置阴影的颜色、模糊程度、偏移量等。

ctx.shadowColor = 'black';
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.fillRect(100, 100, 100, 100);

四、文本绘制

Canvas 支持绘制文本，使用 fillText() 和 strokeText() 方法。

1、绘制填充文本

ctx.font = '30px Arial';  // 设置字体样式
ctx.fillStyle = 'black';  // 设置填充颜色
ctx.fillText('Hello Canvas!', 50, 50);  // 绘制文本

2、绘制描边文本

ctx.lineWidth = 2;
ctx.strokeStyle = 'red';  // 设置描边颜色
ctx.strokeText('Hello Canvas!', 50, 100);  // 绘制文本轮廓

3、文本对齐

可以通过textAlign属性设置文本对齐方式。

ctx.textAlign = 'center'; // 或 'left', 'right'
ctx.fillText('Centered Text', 200, 200);

4、文本基线

通过textBaseline属性设置文本的垂直对齐方式。

ctx.textBaseline = 'middle'; // 或 'top', 'bottom'等
ctx.fillText('Middle Baseline', 300, 300);

五、图片绘制

Canvas 不仅可以绘制简单的图形，还可以加载和显示图片。通过 drawImage() 方法可以将图片绘制到 canvas 上。

1、图像处理

• 绘制完整的图片

const img = new Image();  // 创建一个图片对象
img.src = 'example.jpg';  // 设置图片源

img.onload = function() {
  ctx.drawImage(img, 50, 50, 400, 300);  // 将图片绘制到 canvas 上
};

• 绘制图片的某一部分

// 绘制图片的部分区域（剪切区域）
img.onload = function() {
  ctx.drawImage(img, 100, 100, 200, 200, 50, 50, 200, 200);
  // 参数依次是：图片，源 x, 源 y, 源宽, 源高，目标 x, 目标 y, 目标宽, 目标高
};

如果只想绘制图片的某一部分，可以使用 drawImage() 的重载形式。

2、变换

通过translate(), rotate(), 和 scale()方法来变换坐标系。

ctx.translate(100, 100); // 移动坐标原点
ctx.rotate(Math.PI / 4); // 旋转45度
ctx.scale(2, 2); // 缩放2倍
ctx.fillRect(0, 0, 100, 100); // 绘制矩形

3、复合操作

ctx.globalCompositeOperation = 'destination-over'; // 将新内容绘制在现有内容下方
ctx.fillRect(100, 100, 100, 100);

六、动画效果

Canvas 也可以用于创建动画效果。通过不断更新画布内容并重新绘制图形，可以实现动画效果。

1、使用 requestAnimationFrame

let x = 0;
const animate = function() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);  // 清空画布

  ctx.beginPath();
  ctx.arc(x, 250, 30, 0, Math.PI * 2);  // 绘制圆
  ctx.fillStyle = 'blue';
  ctx.fill();

  x += 5;  // 每次增加 x 坐标，动画会往右移动

  if (x < canvas.width) {
    requestAnimationFrame(animate);  // 请求下一帧
  }
};

animate();  // 启动动画

使用 requestAnimationFrame() 来创建流畅的动画效果。这个方法可以让浏览器优化帧率，确保动画的流畅性。

小结

通过 <canvas>，我们可以在网页中绘制各种图形、图片和文本，甚至可以实现动态效果和动画。掌握了 canvas 的基本操作后，您可以进一步探索更复杂的图形处理和交互式绘制应用。

原文地址