Canvas API

HTML <canvas> 元素是一个位图化的HTML 页面中的区域。

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

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

示例

亲自试一试 »

您访问一个<canvas>元素与HTML 文档对象模型方法getElementById()。

要在画布上绘制，您需要创建一个2D 上下文目的：

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

笔记

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

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

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

路径

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

开始路径 - beginPath()
移动到一个点 - moveTo()
在路径中绘制 - lineTo()
绘制路径 - 描边()

示例

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") 对象的所有属性和方法，用于在画布上绘制文本、线条、方框、圆形、图片等。

绘图方法

直接在画布上绘制的方法只有3种：

Method	Description
fillRect()	Draws a "filled" rectangle
strokeRect()	Draws a rectangle (with no fill)
clearRect()	Clears specified pixels within a rectangle

路径方法

Method	Description
beginPath()	Begins a new path or resets the current path
closePath()	Adds a line to the path from the current point to the start
isPointInPath()	Returns true if the specified point is in the current path
moveTo()	Moves the path to a point in the canvas (without drawing)
lineTo()	Adds a line to the the path
fill()	Fills the current path
rect()	Adds a rectangle to the path
stroke()	Draws the current path
	Circles and Curves
bezierCurveTo()	Adds a cubic Bézier curve to the path
arc()	Adds an arc/curve (circle, or parts of a circle) to the path
arcTo()	Adds an arc/curve between two tangents to the path
quadraticCurveTo()	Adds a quadratic Bézier curve to the path

文本

Method/Prop	Description
direction	Sets or returns the direction used to draw text
fillText()	Draws "filled" text on the canvas
font	Sets or returns the font properties for text content
measureText()	Returns an object that contains the width of the specified text
strokeText()	Draws text on the canvas
textAlign	Sets or returns the alignment for text content
textBaseline	Sets or returns the text baseline used when drawing text

颜色、样式和阴影

Method/Property	Description
addColorStop()	Specifies the colors and stop positions in a gradient object
createLinearGradient()	Creates a linear gradient (to use on canvas content)
createPattern()	Repeats a specified element in the specified direction
createRadialGradient()	Creates a radial/circular gradient (to use on canvas content)
fillStyle	Sets or returns the color, gradient, or pattern used to fill the drawing
lineCap	Sets or returns the style of the end caps for a line
lineJoin	Sets or returns the type of corner created, when two lines meet
lineWidth	Sets or returns the current line width
miterLimit	Sets or returns the maximum miter length
shadowBlur	Sets or returns the blur level for shadows
shadowColor	Sets or returns the color to use for shadows
shadowOffsetX	Sets or returns the horizontal distance of the shadow from the shape
shadowOffsetY	Sets or returns the vertical distance of the shadow from the shape
strokeStyle	Sets or returns the color, gradient, or pattern used for strokes

转换

Method	Description
scale()	Scales the current drawing bigger or smaller
rotate()	Rotates the current drawing
translate()	Remaps the (0,0) position on the canvas
transform()	Replaces the current transformation matrix for the drawing
setTransform()	Resets the current transform to the identity matrix. Then runs transform()

图片绘制

Method	Description
drawImage()	Draws an image, canvas, or video onto the canvas

ImageData 对象/像素操作

Method/Property	Description
createImageData()	Creates a new, blank ImageData object
getImageData()	Returns an ImageData object that copies the pixel data for the specified rectangle on a canvas
ImageData.data	Returns an object that contains image data of a specified ImageData object
ImageData.height	Returns the height of an ImageData object
ImageData.width	Returns the width of an ImageData object
putImageData()	Puts the image data (from a specified ImageData object) back onto the canvas

合成

Property	Description
globalAlpha	Sets or returns the current alpha or transparency value of the drawing
globalCompositeOperation	Sets or returns how a new image are drawn onto an existing image

其他方法

Method	Description
clip()	Clips a region of any shape and size from the original canvas
save()	Saves the state of the current drawing context and all its atributes
restore()	Restores the previously saved state and attributes
createEvent()
getContext()
toDataURL()

标准属性和事件

canvas对象也支持标准特性和事件。

浏览器支持

这个<canvas>element 是 HTML5 标准 (2014)。

Canvas API所有现代浏览器都支持：


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

码农教程 - 一技在手,衣食无忧!