HTML DOM Canvas 对象

<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();

亲自试一试

颜色、样式和阴影

属性 描述
fillStyle 设置或返回用于填充绘图的颜色、渐变或图案。
strokeStyle 设置或返回用于笔划的颜色、渐变或图案。
shadowColor 设置或返回用于阴影的颜色。
shadowBlur 设置或返回阴影的模糊级别。
shadowOffsetX 设置或返回阴影到形状的水平距离。
shadowOffsetY 设置或返回阴影到形状的垂直距离。
方法 描述
createLinearGradient() 创建线性渐变(用于画布内容)。
createPattern() 在指定方向重复指定的元素。
createRadialGradient() 创建径向/圆形渐变(用于画布内容)。
addColorStop() 规定渐变对象中的颜色和停止位置。

线条样式

属性 描述
lineCap 设置或返回线的端盖样式。
lineJoin 设置或返回两条线相交时创建的角的类型。
lineWidth 设置或返回当前线宽。
miterLimit 设置或返回最大斜接长度。

矩形

方法 描述
rect() 创建矩形。
fillRect() 绘制“填充的”矩形。
strokeRect() 绘制矩形(无填充)。
clearRect() 清除给定矩形内的指定像素。

路径

方法 描述
fill() 填充当前图形(路径)。
stroke() 实际上绘制您定义的路径。
beginPath() 开始路径,或重置当前路径。
moveTo() 将路径移动到画布中的指定点,而不创建线。
closePath() 创建从当前点返回起点的路径。
lineTo() 添加一个新点并创建一条从该点到画布中最后一个指定点的线。
clip() 从原始画布中剪裁任意形状和大小的区域。
quadraticCurveTo() 创建二次贝塞尔曲线。
bezierCurveTo() 创建三次贝塞尔曲线。
arc() 创建圆弧/曲线(用于创建圆或圆的一部分)。
arcTo() 在两条切线之间创建圆弧/曲线。
isPointInPath() 如果指定点在当前路径中,则返回 true,否则返回 false。

转换

方法 描述
scale() 放大或缩小当前图形。
rotate() 旋转当前图形。
translate() 重新映射画布上的 (0,0) 位置。
transform() 替换绘图的当前转换矩阵。
setTransform() 将当前转换重置为单位矩阵。然后运行 transform()

文本

属性 描述
font 设置或返回文本内容的当前字体属性。
textAlign 设置或返回文本内容的当前对齐方式。
textBaseline 设置或返回绘制文本时使用的当前文本基线。
方法 描述
fillText() 在画布上绘制“填充”文本。
strokeText() 在画布上绘制文本(无填充)。
measureText() 返回包含指定文本宽度的对象。

图像绘制

方法 描述
drawImage() 在画布上绘制图像、画布或视频。

像素操作

属性 描述
width 返回 ImageData 对象的宽度。
height 返回 ImageData 对象的高度。
data 返回包含指定 ImageData 对象的图像数据的对象。
方法 描述
createImageData() 创建新的空白 ImageData 对象。
getImageData() 返回 ImageData 对象,该对象复制画布上指定矩形的像素数据。
putImageData() 将图像数据(来自指定的 ImageData 对象)放回画布上。

合成

属性 描述
globalAlpha 设置或返回绘图的当前 alpha 或透明度值。
globalCompositeOperation 设置或返回如何将新图像绘制到现有图像上。

其他

方法 描述
save() 保存当前上下文的状态。
restore() 返回之前保存的路径状态和属性。
createEvent()
getContext()
toDataURL()

标准属性和事件

canvas 对象同时支持标准属性事件

相关页面

HTML 教程:HTML5 画布

HTML 图像教程:HTML Canvas 教程

HTML 参考手册:HTML <canvas> 标签