Canvas 属性,方法

context . restore() //弹出堆最上面保存的绘图状态 

context . save() //在绘图状态堆上保存当前绘图状态 

绘图状态可以看作当前画面应用的所有样式和变形的一个快照。而状态的应用则可以避免绘图代码的过度膨胀。

转换(Transformations) 

context . rotate(angle)  //按给定的弧度旋转,按顺时针旋转 

context . scale(x, y) //按给定的缩放倍率缩放，1.0,为不变

context . setTransform(m11, m12, m21, m22, dx, dy)//重设当前的转换到

context . transform(m11, m12, m21, m22, dx, dy) //矩阵变换，结果等于当前的变形矩阵乘上

context . translate(x, y) //可以理解为偏移，向 x,y方向偏移指定的量,其用来移动 Canvas 的原点到一个指定的值

 

合成（Compositing）

context . globalAlpha [ = value ] //0-1.0之间的数据，设定图像的透明度

context . globalCompositeOperation [ = value ] //设定重叠图像的覆盖方式，可以设定为(注，值大小写敏感)：

 

颜色和风格

context . fillStyle [ = value ] //返回填充形状的当前风格，能被设置以用来改变当前的填充风格，其值可以是CSS颜色字串，也可以是CanvasGradient或者 CanvasPattern 对象，非法的值将被忽略。

context . strokeStyle [ = value ] //返回当前描绘形状的风格，能被设置，其值同上。

gradient . addColorStop(offset, color) //在给定偏移的地方增加一个渐变颜色点，偏移量取值范围为 0-1.0 之间，否则产生一个 INDEX_SIZE_ERR的异常，color 为 DOM 字符串，如果不能解析，则抛出一个 SYNTAX_ERR的异常

gradient =  context .  createLinearGradient(x0,  y0, x1, y1) //建立一个线性渐变，如果任何一个参数不是有限值，则抛出一个NOT_SUPPORTED_ERR的异常。

gradient = context . createRadialGradient(x0, y0, r0, x1, y1, r1) //建立一个径向渐变，如果任何一个参数不是有限值，则抛出一个NOT_SUPPORTED_ERR的异常。假如 r0或 r1 为负值，则抛出 INDEX_SIZE_ERR的异常。

 

pattern = context . createPattern(image, repetition)

本方法用指定的图像和重复方向建立一个画布图案对象，image 参数可为 img,canvas,video 元素中的任一个，如果不满足此条件，则抛出TYPE_MISMATCH_ERR 异常，如果图片编码未知或没有图像数据，则抛出INVALID_STATE_ERR 异常；

第二个参数可以是下列值： 

repeat         默认参数，如果为空，则为此参数，表示两个方向重复
repeat-x      仅水平重复
repeat-y      仅垂直重复
no-repeat     不重复

 

 

 

 

canvas的状态
每个上下文都包含一个绘图状态的堆，绘图状态包含下列内容：
$ 当前的 transformation matrix.
$ 当前的 clipping region
$ 当前的属性值：fillStyle, font, globalAlpha,
globalCompositeOperation, lineCap, lineJoin,
lineWidth, miterLimit, shadowBlur, shadowColor,
shadowOffsetX, shadowOffsetY, strokeStyle, textAlign,
textBaseline
注：当前 path 和当前 bitmap 不是绘图状态的一部分，当前 path 是持久
存在的，仅能被 beginPath()复位，当前 bitmap 是 canvas 的属性，而非绘
图上下文。

 

var context = canvas.getContext('2d'); 
context.fillRect(0,0,50,50); 
canvas.setAttribute('width', '300'); // clears the canvas  
context.fillRect(0,100,50,50); 
canvas.width = canvas.width;         // clears the canvas  
context.fillRect(100,0,50,50);       // only this square remains