HTML 画布参考
这个<画布>元素定义了一个位图化的HTML 页面中的区域。
这个画布API允许 JavaScript绘制图形在画布上。
Canvas API 可以绘制形状、线条、曲线、方框、文本和图片，以及颜色、旋转、透明度和其他像素操作。
您可以使用以下命令在 HTML 页面中的任意位置添加 canvas 元素 <canvas>标签：
您可以访问一个<canvas>元素与HTML 文档对象模型方法getElementById()。
要在画布上绘制，您需要创建一个2D 上下文目的：
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
笔记
HTML<canvas>元素本身没有绘图能力。
您必须使用 JavaScript 来绘制任何图形。
这个getContext()方法返回一个带有绘图工具（方法）的对象。
在画布上绘图
创建 2D 上下文后，您可以在画布上绘图。
这个填充矩形()方法绘制一个黑色矩形，其左上角位于位置 20,20。该矩形宽 150 像素，高 100 像素。
示例
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillRect(20, 20, 150, 100);
亲自试一试 »
使用颜色
这个填充样式属性设置绘图对象的填充颜色：
示例
const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
亲自试一试 »
您还可以创建一个新的<canvas>元素与document.createElement()方法，并将元素添加到现有的 HTML 页面：
示例
const myCanvas = document.createElement("canvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 150, 100);
亲自试一试 »
路径
在画布上绘图的常见方法是：
- 开始路径 - 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() |
标准属性和事件
相关页面
HTML 教程：HTML5 画布
HTML 参考：HTML <canvas> 标签
浏览器支持
这个<canvas>element 是 HTML5 标准 (2014)。
Canvas API所有现代浏览器都支持：
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 9-11 |