canvas 元素仅仅是为了充当绘图环境对象的容器而存在的,该环境对象提供了全部的绘制功能。本篇文章我们只关注 2d 绘图环境。

2d 绘图环境

Canvas 的 2d 绘图环境对象提供了功能强大的API,可以用来绘制图形与文本,显示并修改图像等等。本篇文章我们就对 canvas 绘图环境的属性和一些方法做一些简单的了解。

下表列出了绘图环境对象的所有属性:

属性 简介
canvas 指向绘图环境所属的canvas对象
fillstyle 指定该绘图环境在后续的图形填充操作中所使用的颜色,渐变色或方案
font 设定在调用绘图环境对象的 fillText() 或 strokeText() 方法时,所使用的字型
globalAlpha 全局透明度设定,取值范围 0~1.0
globalCompsiteOperation 将某个物体绘制在其他的物体之上时采用的绘制方式
lineCap 如何绘制线段的端点,可取的值:butt、round、square,默认值是 butt
lineWidth 绘制线段的屏幕像素宽度。非负非无穷的 double 值,默认值是 1.0
lineJoin 在两条线段相交时如何绘制交点,可取的值:bevel, round, miter,默认值是 miter
miterLimit 如何绘制 miter 形式的线段交点
shadowBlur 延伸的阴影效果,该值为高斯模糊方程式中的参数值,非负、非无穷的 double 值,默认值为 0
shadowColor 阴影的颜色值
shadowOffsetX 阴影效果的水平方向偏移量
shadowOffsetY 阴影效果的垂直方向偏移量
strokeStyle 对路径描边时所使用的绘制风格
textAlign fillText() 或 strokeText() 方法绘制的时候,所画文本的水平对齐方式
textBaseline fillText() 或 strokeText() 方法绘制的时候,所画文本的垂直对齐方式

此外,还有两个重要的方法,用来保存及恢复当前 canvas 绘图环境的所有属性:

方法 描述
save() 将当前 canvas 的状态推送到一个保存 canvas 状态的堆栈顶部
restore() 将 canvas 状态堆栈顶部的条目弹出。原来保存于栈顶的哪一组状态,在弹出之后,就被设置成 canvas 当前的状态了