canvas的相关知识

表 1. canvas 方法

 

方法	用途
getContext(contextId)	公开在 canvas 上绘图需要的 API。惟一（当前）可用的 contextID是 2d。
height	设置 canvas 的高度。默认值是 150 像素。
width	设置 canvas 的宽度。默认值是 300 像素。
createLinearGradient(x1,y1,x2,y2)	创建一个线性渐变。起始坐标为 x1,y1，结束坐标为 x2,y2。
createRadialGradient(x1,y1,r1,x2,y2,r2)	创建一个放射状渐变。圆圈的起始坐标是 x1,y1，半径为 r1。圆圈的结束坐标为 x2,y2，半径为 r2。
addColorStop(offset, color)	向一个渐变添加一个颜色停止。颜色停止（color stop） 是渐变中颜色更改发生的位置。offset 必须介于 0 到 1 之间。
fillStyle	设置用于填充一个区域的颜色 — 例如，fillStyle='rgb(255,0,0)'.
strokeStyle	设置用于绘制一根直线的颜色 — 例如，fillStyle='rgb(255,0,0)'.
fillRect(x,y,w,h)	填充一个定位于 x 和 y，宽度和高度分别为 w 和 h 的矩形。
strokeRect(x,y,w,h)	绘制一个定位于 x 和 y，宽度和高度分别为 w 和 h 的矩形的轮廓。
moveTo(x,y)	将绘图位置移动到坐标 x,y。
lineTo(x,y)	从绘图方法结束的最后位置到 x,y 绘制一条直线。

 

 

CanvasRenderingContext2D 对象的方法

方法	描述
arc()	用一个中心点和半径，为一个画布的当前子路径添加一条弧线。
arcTo()	使用目标点和一个半径，为当前的子路径添加一条弧线。
beginPath()	开始一个画布中的一条新路径（或者子路径的一个集合）。
bezierCurveTo()	为当前的子路径添加一个三次贝塞尔曲线。
clearRect()	在一个画布的一个矩形区域中清除掉像素。
clip()	使用当前路径作为连续绘制操作的剪切区域。
closePath()	如果当前子路径是打开的，就关闭它。
createLinearGradient()	返回代表线性颜色渐变的一个 CanvasGradient 对象。
createPattern()	返回代表贴图图像的一个 CanvasPattern 对象。
createRadialGradient()	返回代表放射颜色渐变的一个 CanvasGradient 对象。
drawImage()	绘制一幅图像。
fill()	使用指定颜色、渐变或模式来绘制或填充当前路径的内部。
fillRect()	绘制或填充一个矩形。
lineTo()	为当前的子路径添加一条直线线段。
moveTo()	设置当前位置并开始一条新的子路径。
quadraticCurveTo()	为当前路径添加一条贝塞尔曲线。
rect()	为当前路径添加一条矩形子路径。
restore()	为画布重置为最近保存的图像状态。
rotate()	旋转画布。
save()	保存 CanvasRenderingContext2D 对象的属性、剪切区域和变换矩阵。
scale()	标注画布的用户坐标系统。
stroke()	沿着当前路径绘制或画一条直线。
strokeRect()	绘制（但不填充）一个矩形。
translate()	转换画布的用户坐标系统。