一、引言
在现代 Web 开发中，HTML5 引入了许多强大的特性，其中 <canvas> 元素无疑是一个亮点。它为我们在网页上绘制图形、图表以及各种可视化内容提供了强大的支持。通过结合 JavaScript，我们能够实现丰富多样的视觉效果，极大地增强了网页的交互性和表现力。本文将深入探讨 HTML5 Canvas 的基础知识和常见应用场景，帮助你快速上手并掌握这一强大的技术。
二、什么是 Canvas
HTML5 的 <canvas> 元素本质上是一个用于图形绘制的容器，它通过脚本（通常是 JavaScript）来完成具体的图形绘制工作。<canvas> 标签仅仅是一个图形容器，默认情况下没有边框和内容，我们需要使用 JavaScript 来赋予它生命，在其中绘制路径、矩形、圆形、字符以及添加图像等各种图形元素。
三、浏览器支持情况
<canvas> 元素在现代浏览器中得到了广泛的支持，以下是不同浏览器支持 <canvas> 元素的第一个版本号：
| 浏览器 | 版本号 |
|---|---|
| Chrome | 4.0 |
| Firefox | 9.0 |
| Safari | 2.0 |
| Opera | 3.1 |
| Edge | 9.0 |
可以看到，主流浏览器都对其提供了良好的兼容性，这为我们在项目中使用 Canvas 提供了坚实的基础。
四、创建和使用 Canvas
- 创建一个简单的 Canvas 元素：在 HTML 中，通过
<canvas>标签创建一个画布，通常需要指定id属性（方便在脚本中引用）、width和height属性来定义画布的大小。例如：
<canvas id="myCanvas" width="200" height="100"></canvas>
为了更直观地看到画布的存在，我们可以使用 style 属性为其添加边框：
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
- 使用 JavaScript 绘制图形：canvas 元素本身没有绘图能力，所有的绘制工作都必须在 JavaScript 内部完成。下面是一个绘制红色矩形的简单示例：
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
在这个例子中，首先通过 document.getElementById 方法找到 <canvas> 元素，然后使用 getContext("2d") 获取 2D 绘图上下文对象 ctx。getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。接下来，设置 fillStyle 属性为红色（#FF0000），最后使用 fillRect 方法绘制一个矩形，该方法的参数 (0, 0, 150, 75) 表示从画布的左上角 (0, 0) 开始，绘制一个宽 150 像素、高 75 像素的矩形。
五、Canvas 的坐标系统
Canvas 是一个二维网格，其左上角的坐标为 (0, 0)。我们在绘制图形时，所有的坐标都是基于这个原点来确定的。例如，在上面的 fillRect 方法中，(0, 0) 就是矩形的起始坐标点。理解 Canvas 的坐标系统对于准确绘制图形至关重要。
六、Canvas 的常用绘制方法
- 绘制路径：在 Canvas 上绘制线条，我们需要使用
moveTo和lineTo方法来定义线条的起始和结束坐标，最后使用stroke方法来绘制线条。例如：
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
- 绘制圆形：使用
arc方法来绘制圆形，该方法的参数包括圆心坐标(x, y)、半径r、起始角度start和结束角度stop。例如：
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
- 绘制文本：使用 Canvas 绘制文本，主要涉及
font属性以及fillText和strokeText方法。font属性用于定义字体样式，fillText方法用于绘制实心文本，strokeText方法用于绘制空心文本。例如：
// 绘制实心文本
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);// 绘制空心文本
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
- 创建渐变：Canvas 支持两种渐变方式：线性渐变和径向渐变。分别使用
createLinearGradient和createRadialGradient方法创建渐变对象，然后使用addColorStop方法指定颜色停止点，最后将渐变对象设置为fillStyle或strokeStyle来填充或绘制图形。例如：
// 线性渐变
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);// 径向渐变
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
- 添加图像：将图像放置到 Canvas 上，使用
drawImage方法，该方法的参数包括图像对象、图像在画布上的起始坐标(x, y)。例如：
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
七、总结
HTML5 Canvas 为 Web 开发者提供了一个强大而灵活的图形绘制工具，通过本文的介绍，我们了解了 Canvas 的基本概念、创建和使用方法，以及各种常用的绘制技巧。希望这些知识能够帮助你在实际项目中充分发挥 Canvas 的潜力，创造出更加精彩的 Web 应用。如果你想深入了解 Canvas 的更多特性和细节，可以参考相关的 HTML5 Canvas 参考手册。