HTML5 的 canvas 标签用于绘制图像(通过脚本,通常是 JavaScript)。不过,canvas 元素本身并没有绘制能力(它仅仅是图形的容器),所以必须使用脚本来完成实际的绘图任务。getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。本文会介绍完整的 getContext(“2d”) 对象的属性和方法,可用于在画布上绘制文本、线条、矩形、圆形等等。
画布 | ||||
---|---|---|---|---|
功能 | 名称 | 描述 | 备注 | 实例链接 |
颜色/样式/阴影 | fillStyle | 置或返回用于填充绘画的颜色、渐变或模式 | 默认值为 #000000 | 实例链接 |
strokeStyle | 设置或返回用于笔触的颜色、渐变或模式 | 默认值为 #000000 | 实例链接 | |
shadowColor | 设置或返回用于阴影的颜色 | shadowColor 属性与 shadowBlur 属性一起使用,来创建阴影 | 实例链接 | |
shadowBlur | 设置或返回阴影的模糊级数 | Internet Explorer 8 及之前的版本不支持 canvas 元素 | 实例链接 | |
shadowOffsetX | 设置或返回阴影与形状的水平距离 | 如需调整阴影与形状的垂直距离,请使用 shadowOffsetY 属性 | 实例链接 | |
shadowOffsetY | 设置或返回阴影与形状的垂直距离 | 如需调整阴影与形状的水平距离,请使用 shadowOffsetX 属性 | 实例链接 | |
createLinearGradient() | 创建线性的渐变对象 | 请使用该对象作为 strokeStyle 或 fillStyle 属性的值 请使用 addColorStop() 方法规定不同的颜色,以及在 gradient 对象中的何处定位颜色 |
实例链接 | |
createPattern() | 在指定的方向内重复指定的元素 | 元素可以是图片、视频,或者其他 canvas 元素 被重复的元素可用于绘制/填充矩形、圆形或线条等等 |
实例链接 | |
createRadialGradient() | 创建放射状/圆形渐变对象 | 请使用该对象作为 strokeStyle 或 fillStyle 属性的值 请使用 addColorStop() 方法规定不同的颜色,以及在 gradient 对象中的何处定位颜色 |
实例链接 | |
addColorStop() | 规定渐变对象中的颜色和位置 | 可以多次调用 addColorStop() 方法来改变渐变 为了获得可见的渐变,您需要创建至少一个色标 |
实例链接 | |
线条样式 | lineCap | 设置或返回线条末端线帽的样式 | "round" 和 "square" 值会使线条略微变长 | 实例链接 |
lineJoin | 设置或返回所创建边角的类型,当两条线交汇时 | "miter" 值受 miterLimit 属性的影响 | 实例链接 | |
lineWidth | 设置或返回当前线条的宽度,以像素计 | Internet Explorer 8 及之前的版本不支持 canvas 元素 | 实例链接 | |
miterLimit | 设置或返回最大斜接长度 (斜接长度指的是在两条线交汇处内角和外角之间的距离) |
只有当 lineJoin 属性为 "miter" 时,miterLimit 才有效 | 实例链接 | |
矩形 | rect() | 创建矩形 | 使用 stroke() 或 fill() 方法在画布上实际地绘制矩形 | 实例链接 |
fillRect() | 绘制"已填充"的矩形 | 默认的填充颜色是黑色 使用 fillStyle 属性来设置用于填充绘图的颜色、渐变或模式 |
实例链接 | |
strokeRect() | 绘制矩形(无填充) | 笔触的默认颜色是黑色 使用 strokeStyle 属性来设置笔触的颜色、渐变或模式。 |
实例链接 | |
clearRect() | 清空给定矩形内的指定像素 | Internet Explorer 8 及之前的版本不支持 canvas 元素 | 实例链接 | |
路径 | fill() | 填充当前的图像(路径) | 默认颜色是黑色 使用 fillStyle 属性来填充另一种颜色/渐变 如果路径未关闭,那么 fill() 方法会从路径结束点到开始点之间添加一条线,以关闭该路径(正如 closePath() 一样),然后填充该路径 |
实例链接 |
stroke() | 会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径 | 默认颜色是黑色 使用 strokeStyle 属性来绘制另一种颜色/渐变 |
实例链接 | |
beginPath() | 开始一条路径,或重置当前的路径 | 使用这些方法来创建路径 moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 和 arc() 使用 stroke() 方法在画布上绘制确切的路径 |
实例链接 | |
moveTo() | 把路径移动到画布中的指定点,不创建线条 | 使用 stroke() 方法在画布上绘制确切的路径 | 实例链接 | |
closePath() | 创建从当前点到开始点的路径 | 使用 stroke() 方法在画布上绘制确切的路径 使用 fill() 方法来填充图像 使用 fillStyle 属性来填充另一个颜色/渐变 |
实例链接 | |
lineTo() | 添加一个新点,然后创建从该点到画布中最后指定点的线条 | 该方法并不会创建线条 使用 stroke() 方法在画布上绘制确切的路径 |
实例链接 | |
clip() | 从原始画布中剪切任意形状和尺寸 | 一旦剪切了某个区域,则所有之后的绘图都会被限制在被剪切的区域内 也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存,并在以后的任意时间对其进行恢复 |
实例链接 | |
quadraticCurveTo() | 使用表示二次贝塞尔曲线的指定控制点,向当前路径添加一个点 | 第一点是用于二次贝塞尔中的控制点,第二个点是曲线的结束点 曲线的开始点是当前路径中最后一个点。如果路径不存在,那么请使用 beginPath() 和 moveTo() 方法来定义开始点 |
实例链接 | |
bezierCurveTo() | 通过使用表示三次贝塞尔曲线的指定控制点,向当前路径添加一个点 | 前两点是用于三次贝塞尔中的控制点,第三点是曲线的结束点 曲线的开始点是当前路径中最后一个点。如果路径不存在,那么请使用 beginPath() 和 moveTo() 方法来定义开始点 |
实例链接 | |
arc() | 创建弧/曲线(用于创建圆或部分圆) | 通过 arc() 来创建圆,请把起始角设置为 0,结束角设置为 2*Math.PI 使用 stroke() 或 fill() 方法在画布上绘制实际的弧 |
实例链接 | |
arcTo() | 画布上创建介于两个切线之间的弧/曲线 | 使用 stroke() 方法在画布上绘制确切的弧 | 实例链接 | |
isPointInPath() | 如果指定的点位于当前路径中,isPointInPath() 方法返回 true,否则返回 false | Internet Explorer 8 及之前的版本不支持 canvas 元素 | 实例链接 | |
转换 | scale() | 缩放当前绘图至更大或更小 | 对绘图进行缩放,所有之后的绘图也会被缩放。定位也会被缩放 | 实例链接 |
rotate() | 旋转当前的绘图 | 旋转只会影响到旋转完成后的绘图 | 实例链接 | |
translate() | 重新映射画布上的 (0,0) 位置 | 在 translate() 之后调用诸如 fillRect() 之类的方法时,值会添加到 x 和 y 坐标值上 | 实例链接 | |
transform() | 替换当前的变换矩阵(transform() 允许您缩放、旋转、移动并倾斜当前的环境) | 该变换只会影响 transform() 方法调用之后的绘图 | 实例链接 | |
setTransform() | 把当前的变换矩阵重置为单位矩阵,然后以相同的参数运行 transform() | 该变换只会影响 setTransform() 方法调用之后的绘图 | 实例链接 | |
文本 | font | 设置或返回画布上文本内容的当前字体属 | 使用的语法与 CSS font 属性 相同 | 实例链接 |
textAlign | 根据锚点,设置或返回文本内容的当前对齐方式 | 使用 fillText() 或 strokeText() 方法在画布上实际地绘制并定位文本 | 实例链接 | |
textBaseline | 设置或返回在绘制文本时的当前文本基线 | fillText() 和 strokeText() 方法在画布上定位文本时,将使用指定的 textBaseline 值 | 实例链接 | |
fillText() | 在画布上绘制填色的文本 | 使用 font 属性来定义字体和字号,并使用 fillStyle 属性以另一种颜色/渐变来渲染文本 | 实例链接 | |
strokeText() | 在画布上绘制文本(无填充色) | 使用 font 属性来定义字体和字号,并使用 strokeStyle 属性以另一种颜色/渐变来渲染文本 | 实例链接 | |
measureText() | 返回一个对象,该对象包含以像素计的指定字体宽度 | 需要在文本向画布输出之前,就了解文本的宽度,那么请使用该方法 | 实例链接 | |
图像绘制 | drawImage() | 在画布上绘制图像、画布或视频 | 也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸 | 实例链接 |
像素操作 | width | 返回 ImageData 对象的宽度,以像素计 | 参阅 createImageData()、 getImageData() 和 putImageData() 方法,以获得更多关于 ImageData 对象的知识 | 实例链接 |
height | 返回 ImageData 对象的高度,以像素计 | 参阅 createImageData()、 getImageData() 和 putImageData() 方法,以获得更多关于 ImageData 对象的知识 | 实例链接 | |
data | 返回一个对象,该对象包含指定的 ImageData 对象的图像数据 | 参阅 createImageData()、 getImageData() 和 putImageData() 方法,以获得更多关于 ImageData 对象的知识 | 实例链接 | |
createImageData() | 创建新的空白 ImageData 对象。新对象的默认像素值 transparent black | 操作完成数组中的 color/alpha 信息之后,您可以使用 putImageData() 方法将图像数据拷贝回画布上 | 实例链接 | |
getImageData() | 返回 ImageData 对象,该对象拷贝了画布指定矩形的像素数据 | ImageData 对象不是图像,它规定了画布上一个部分(矩形),并保存了该矩形内每个像素的信息 操作完成数组中的 color/alpha 信息之后,您可以使用 putImageData() 方法将图像数据拷贝回画布上 |
实例链接 | |
putImageData() | 将图像数据(从指定的 ImageData 对象)放回画布上 | 参阅 getImageData() 方法,它可复制画布上指定的矩形的像素数据 参阅 createImageData() 方法,它可创建新的空白 ImageData 对象 |
实例链接 | |
合成 | globalAlpha | 设置或返回绘图的当前透明值(alpha 或 transparency) | 属性值必须是介于 0.0(完全透明) 与 1.0(不透明) 之间的数字 | 实例链接 |
globalCompositeOperation | 设置或返回如何将一个源(新的)图像绘制到目标(已有的)的图像上 | - | 实例链接 | |
其他 | save() | 保存当前环境的状态 | - | - |
restore() | 返回之前保存过的路径状态和属性 | - | - | |
createEvent() | 返回新创建的 Event 对象,具有指定的类型 | - | - | |
getContext() | 返回一个用于在画布上绘图的环境 | - | - | |
toDataURL() | 返回的数据是一个字符串,表示包含抓取的图形数据的编码URL | - | - |