html5中的canvas学习记录（一）

canvas提供了两个属性三个方法：

•    height 
•    width
•   getContext()
•   toDataURL()
•   toBlob()

注意：

1.canvas中有两种长宽，一个是canvas元素的长宽，另一个是绘图表面的长宽。

    情况一：在css中规定长宽，只是改变了canvas元素的长宽。（绘图表面还是默认的长宽）

   情况二：<canvas height=200 width=300></canvas>  ！！注意不需要px，相当于更改两个的长宽

2.canvas点击事件：canvas中的点击事件e的clientX,clientY位置是浏览器位置，若要做其他操作记得修改相对位置

3.为了避免绘画时canvas元素还没加载，建议将绘制脚本放在</body>标签之前

三种方法：

1. getContext() 返回该canvas的绘图环境对象，每个canvas元素对应一个

2. toDataURL(type，quality)   //很关键  离屏canvas，将其赋值给img标签的src属性

3 toBlob() 创建一个用于表示此canvas元素图像文件的Blob。