Canvas API

<canvas> 元素定义 HTML 页面中的位图区域。

Canvas API 允许 JavaScript 在画布上绘制图形。

Canvas API 可以绘制形状、线条、曲线、方框、文本和图像，以及颜色、旋转、透明度和其他像素操作。

将 Canvas 添加到 HTML

您可以使用 <canvas> 标签在 HTML 页面中的任意位置添加 canvas 元素：

实例

<canvas id="myCanvas" width="300" height="150"></canvas>

亲自试一试

如何访问 Canvas 元素

您可以使用 HTML DOM 方法 getElementById() 访问 <canvas> 元素：

const myCanvas = document.getElementById("myCanvas");

如需在画布上绘图，您需要创建 2D 上下文对象：

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

笔记

HTML <canvas> 元素本身没有绘图功能。

您必须使用 JavaScript 来绘制任何图形。

getContext() 方法返回一个带有绘图工具（方法）的对象。

在画布上绘图

创建 2D 上下文对象之后，您就可以在画布上绘图了。

下面的 fillRect() 方法绘制了黑色矩形，其左上角位于位置 20,20。该矩形宽 150 像素，高 100 像素：

实例

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

ctx.fillRect(20, 20, 150, 100);

亲自试一试

使用颜色

fillStyle 属性设置绘图对象的填充颜色：

实例

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

ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

亲自试一试

您还可以使用 document.createElement() 方法创建一个新的 <canvas> 元素，并将该元素添加到现有 HTML 页面：

实例

const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);

亲自试一试

路径

在画布上绘图的常见方法是：

1. 开始路径 - beginPath()
2. 移动到一个点 - moveTo()
3. 在路径中绘制 - lineTo()
4. 绘制路径 - stroke()

实例

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

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.stroke();

亲自试一试