当前位置：首页 > news >正文

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

news 来源：原创 2025/5/14 4:31:19

在数字时代，表达创意的方式多种多样，而 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 的基本操作后，您可以进一步探索更复杂的图形处理和交互式绘制应用。

原文地址

一、Canvas 元素基础

1、创建 Canvas 元素

2、获取上下文（Context）

二、绘制基本形状

1、绘制矩形

2、绘制圆形

3、弧形绘制

4、绘制线条

简单的直线

曲线和其他线条

5、绘制多边形

绘制三角形

绘制五边形

三、图形样式

1、颜色和透明度

2、渐变

3、阴影

四、文本绘制

1、绘制填充文本

2、绘制描边文本

3、文本对齐

4、文本基线

五、图片绘制

1、图像处理

2、变换

3、复合操作

六、动画效果

1、使用 requestAnimationFrame

小结

相关文章：

1、使用 `requestAnimationFrame`