菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

HTML Canvas 参考


<canvas> 元素在 HTML 页面中定义了一个位图区域。

Canvas API 允许 JavaScript 在 canvas 上绘制图形

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

您可以使用 <canvas> 标签将 canvas 元素添加到 HTML 页面的任何位置

示例

<canvas id="myCanvas" width="300" height="150"></canvas>
自己动手试一试 »

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

要在 canvas 中绘图,您需要创建一个 2D 上下文对象

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

注意

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

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

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


在 Canvas 上绘图

创建 2D 上下文后,您就可以在 canvas 上进行绘图了。

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);
自己动手试一试 »

路径

在 canvas 上绘图的常用方法是

  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();
自己动手试一试 »

Canvas API 完整参考

本参考涵盖了 getContext("2d") 对象的所有属性和方法,用于在 canvas 上绘制文本、线条、方框、圆形、图片等。

绘图方法

直接在 canvas 上绘图的方法只有 3 个

方法 描述
fillRect() 绘制一个“填充”矩形
strokeRect() 绘制一个矩形(无填充)
clearRect() 清除矩形内指定的像素

路径方法

方法 描述
beginPath() 开始新路径或重置当前路径
closePath() 从当前点到起始点添加一条线到路径
isPointInPath() 如果指定点在当前路径中,则返回 true
moveTo() 将路径移动到 canvas 中的某个点(不绘制)
lineTo() 向路径添加一条线
fill() 填充当前路径
rect() 向路径添加一个矩形
stroke() 绘制当前路径
 圆形和曲线
bezierCurveTo() 向路径添加一条三次贝塞尔曲线
arc() 向路径添加一条弧线/曲线(圆形或圆形的一部分)
arcTo() 在两条切线之间向路径添加一条弧线/曲线
quadraticCurveTo() 向路径添加一条二次贝塞尔曲线


文本

方法/属性 描述
direction 设置或返回用于绘制文本的方向
fillText() 在 canvas 上绘制“填充”文本
font 设置或返回文本内容的字体属性
measureText() 返回一个包含指定文本宽度的对象
strokeText() 在 canvas 上绘制文本
textAlign 设置或返回文本内容的对齐方式
textBaseline 设置或返回绘制文本时使用的文本基线

颜色、样式和阴影

方法/属性 描述
addColorStop() 指定渐变对象中的颜色和停止位置
createLinearGradient() 创建一个线性渐变(用于 canvas 内容)
createPattern() 在指定方向重复指定元素
createRadialGradient() 创建一个径向/圆形渐变(用于 canvas 内容)
fillStyle 设置或返回用于填充绘图的颜色、渐变或图案
lineCap 设置或返回线条末端帽的样式
lineJoin 设置或返回两条线相交时创建的角的类型
lineWidth 设置或返回当前线宽
miterLimit 设置或返回最大斜接长度
shadowBlur 设置或返回阴影的模糊级别
shadowColor 设置或返回用于阴影的颜色
shadowOffsetX 设置或返回阴影与形状的水平距离
shadowOffsetY 设置或返回阴影与形状的垂直距离
strokeStyle 设置或返回用于描边的颜色、渐变或图案

变换

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

图像绘制

方法 描述
drawImage() 将图像、canvas 或视频绘制到 canvas 上

ImageData 对象 / 像素操作

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

合成

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

其他方法

方法 描述
clip() 从原始 canvas 中剪裁出任何形状和大小的区域
save() 保存当前绘图上下文及其所有属性的状态
restore() 恢复之前保存的状态和属性
createEvent()  
getContext()  
toDataURL()  

标准属性和事件

canvas 对象还支持标准 属性事件


相关页面

Canvas 教程:Canvas 教程

HTML 教程:HTML5 Canvas

HTML 参考:HTML <canvas> 标签


浏览器支持

<canvas> 元素是 HTML5 标准(2014)。

Canvas API 在所有现代浏览器中都受支持

Chrome Edge Firefox Safari Opera IE
9-11

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持