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:性能测试工具。