canvas学习（一）

1.在页面上任意定义一个元素，然后：

var canvas = document.getElementById('canvas'),

context = canvas.getContext('2d');

就此就可以将此元素定义为画布。

页面上的元素：

<canvas id = 'canvas' width = '600' height = '300'>
Canvas not supported

</canvas>

要这样写。

context.font(字体设置)

context.strokeStyle (颜色)

context.strokeText (空心字体)

2.canvas的元素属性：

a.width及height,后面没有px.将与画布自动变化。

b.getContext():返回与此元素相关的绘图环境对象。

c.toDataURL(type,quality):type,默认为img;第二个数值表示图片显示质量。

d.toBlob(callback,type,args...):创建一个用于表示此canvas元素图像文件的blob.

3.canvasRedneringContext2D对象所包含的属性

canvas,fillstyle,font,globalAlpha,globalCompsiteOperation,lineCap,lineWidth,lineJoin,miterLimit

shadowBlur,shadowColor,shadowOffsetX,shadowOffsetY,strokeStyle,textAlign,textBaseline

4.canvas状态的保存与恢复：

a.save()与restore()

5.小技巧：以编程的方式来控制性能分析器

console.profile()及console.profileEnd()

6.性能分析器与时间轴工具

7.jsPerf:性能测试工具。