Canvas API：HTML5 中的图形绘制 API

Canvas API 是 HTML5 中用于绘制 2D 和 3D 图形的 JavaScript API。它可以用于创建游戏、数据可视化、动画等交互式应用程序。Canvas API 可以通过 JavaScript 在网页中绘制图形，包括线条、矩形、圆形、文本等。本文将介绍如何使用 Canvas API 绘制各种图形。

创建 Canvas 元素

要使用 Canvas API，需要首先在 HTML 文件中创建一个 Canvas 元素。可以使用以下代码创建一个 Canvas 元素：

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

id 属性可以用于后续获取 Canvas 元素的引用。width 和 height 属性指定 Canvas 元素的宽度和高度。

获取 Canvas 上下文

在 JavaScript 中，使用 getContext() 方法获取 Canvas 元素的上下文。Canvas 元素支持 2D 和 3D 上下文，可以通过传递参数 "2d" 或 "webgl" 来获取对应的上下文对象。

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d"); // 获取 2D 上下文

绘制图形

获取 Canvas 上下文之后，就可以使用 Canvas API 绘制图形了。以下是一些常用的绘制函数：

绘制矩形

• fillRect(x, y, width, height)：填充一个矩形
• strokeRect(x, y, width, height)：绘制一个矩形边框
• clearRect(x, y, width, height)：清除一个矩形区域

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// 绘制一个宽 100，高 50 的绿色矩形，起点坐标为 (50, 50)
ctx.fillStyle = "green";
ctx.fillRect(50, 50, 100, 50);

// 绘制一个宽 100，高 50 的红色矩形边框，起点坐标为 (50, 50)
ctx.strokeStyle = "red";
ctx.strokeRect(50, 50, 100, 50);

// 清除一个宽 50，高 50 的矩形区域，起点坐标为 (75, 75)
ctx.clearRect(75, 75, 50, 50);

绘制路径

• beginPath()：开始一条路径
• moveTo(x, y)：将路径移动到指定位置，不画线条
• lineTo(x, y)：从当前位置画一条到指定位置的直线
• closePath()：闭合路径
• fill()：填充路径
• stroke()：绘制路径边框

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// 开始一条路径
ctx.beginPath();

// 移动到起点
ctx.moveTo(50, 50);

// 画一条到 (100, 100) 的直线
ctx.lineTo(100, 100);

// 画一条到 (150, 50) 的直线
ctx.lineTo(150, 50);

// 闭合路径
ctx.closePath();

// 填充路径
ctx.fillStyle = "blue";
ctx.fill();

// 绘制路径边框
ctx.strokeStyle = "red";
ctx.lineWidth = 5;
ctx.stroke();

绘制圆形

• arc(x, y, radius, startAngle, endAngle, anticlockwise)：绘制一段圆弧

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// 绘制一个半径为 50，中心坐标为 (100, 100)，起始角度为 0，终止角度为 2π的圆形
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI * 2);
ctx.fillStyle = "orange";
ctx.fill();

绘制文本

• fillText(text, x, y)：在指定位置填充一段文本
• strokeText(text, x, y)：在指定位置绘制一段文本边框

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// 在 (100, 100) 的位置填充一段文本
ctx.font = "30px Arial";
ctx.fillText("Hello world!", 100, 100);

// 在 (200, 200) 的位置绘制一段文本边框
ctx.font = "30px Arial";
ctx.strokeStyle = "red";
ctx.strokeText("Hello world!", 200, 200);

总结

这篇文章简单的介绍了 Canvas API 的使用方法，包括创建 Canvas 元素、获取 Canvas 上下文、绘制图形等。Canvas API 还有很多其他的绘制函数，可以查看 MDN 文档了解更多信息。