Canvas 使用指南

canvas 的能力是通过 context 对象表现出来的，context一般称为绘图环境。

DOMString 为 "2d" 时，context 是 CanvasRenderingContext2D 对象；(本文重点)
DOMString 为 "webgl" 时，context 是 WebGLRenderingContext 对象；
DOMString 为 "webgl2" 时，context 是 WebGL2RenderingContext 对象；
DOMString 为 "bitmaprenderer" 时，context 是 ImageBitmap 对象；

CanvasRenderingContext2D 对象实例 instance 共有16个属性，只要设置了这些属性，就会影响 instance 调用绘制方法时的表现，常用的有：

注意：可使用 instance 的 save() 和 restore() 方法来临时修改 instance 的属性

1、一般用来保存数据，不展示在浏览器页面上，创建的两种方式：a、css 方式设置为 display:none；b、JS创建 documentcreateElement('canvas')；
2、与HTML结合使用：可以采用 CSS 定位的方式，将 HTML 元素置于 canvas 元素之上，比如：在 canva 上叠加一个 div panel 作为某个开关控制界面；选景橡皮筋；时钟等
3、也可使用两个 canvas，一个用来显示，另一个用来做数据准备和处理，这种方式通常效率高，但比较耗费内存

1、准备一个绘制背景的函数，用于每次擦除上一次绘制的结果
2、绘制辅助线
3、监听事件，做坐标转换 windowToCanvas
4、绘制内容的保存于恢复

5、三事件
onmousedown：保存初始 canvas 绘制状态
onmousemove: 更新位置信息，并不断调用初始 canvas 绘制状态来擦除上一个绘制
onmouseup: 调用初始 canvas 绘制状态来擦除上一个绘制，并根据onmousemove保存的信息做最终绘制，将结果绘制在 canvas 上

fillStyle 和 strokeStyle 可以是任意有效的css颜色值或者渐变色以及图像Pattern

canvas 某一时刻只能有一条路径存在，这条路径可以包含多条子路径。用 beginPath 来开始一条新路径或清除上一次子路径

textAlign: left,center,right
textBaseline: top,middle,bottom
1、三属性 font,textAlign,textBaseline
2、三方法 strokeText, fillText, measureText
strokeText(text,x,y,maxWidth) 指定文本超过maxWidth会被缩放
measureText(text)width 返回指定文本宽度
3、水平垂直居中

注意每次变换前，用 save 和 restore 来保存原来绘制上下文

1、由路径定义的一片区域，如一个三角形，矩形，圆形，然后调用 clip 即可得到剪辑区域
2、默认和 canvas 大小一致
3、设置剪辑区域后，浏览器将只对该区域进行绘制
4、调用clip会把剪辑区域设为当前剪辑区域与当前路径定义的区域的交集，故clip 的调用经常在 save 和 restore 之间，这是为了防止剪辑区域越来越小

主要是 drawImage,getImageData,putImageData,createImageData 四个 API

<form id="form1" runat="server">
<div align="center" class="i-canvas">
<canvas id="myCanvas" width="500" height="300"></canvas>
<ul>
<li><button onclick="javascript:DrawPic();return false;">开始画图</button></li>
<li><button onclick="javascript:UploadPic();return false;">上传到服务器</button></li>
</ul>
</div>
</form>

借助Canvas自己的API就可以保存。
整个实现HTML+JavaScript的代码很简单，只要将该psd文件的信息输入代码即可保存下来。
PSD--PhotoshopDocument（PSD），是著名的Adobe公司的图像处理软件Photoshop的专用格式。这种格式可以存储Photoshop中所有的图层，通道、参考线、注解和颜色模式等信息。在保存图像时，若图像中包含有层，则一般都用Photoshop（PSD）格式保存。
PSD格式在保存时会将文件压缩，以减少占用磁盘空间，但PSD格式所包含图像数据信息较多（如图层、通道、剪辑路径、参考线等），因此比其他格式的图像文件还是要大得多。由于PSD文件保留所有原图像数据信息，因而修改起来较为方便，大多数排版软件不支持PSD格式的文件。

---