Canvas与SVG(Scalable Vector Graphics)的区别：
1、Canvas是一个位图画布，其上绘制的图形不可缩放；SVG是矢量图可以放大缩小。
2、Canvas绘制出的对象不属于页面DOM结构或者任何命名空间；SVG支持单机检测（能检测鼠标单机了图像上哪个对象）
3、Canvas不需要存储图像中的对象所以性能非常好。
一、Canvas
1、元素：<canvas></canvas>
2、坐标：左上角坐标为原点，即x=0,y=0的点。
3、替代内容。
在不支持canvas的浏览器上需要显示提示或替代内容。如：
4、检测浏览器支持情况
5、划线
一段简单的代码展示了HTML5 Canvas API的重要流程。
首先获取canvas对象的访问权，接着获取canvas二维上下文。
接下来调用3个方法beginPath、moveTo、lineTo传入线的起点和终点坐标。
方法moveTo和lineTo实际上并不画线，在结束canvas操作的时候，通过context.stroke()方法完成线的绘制。
6、变换
context.translate(x, y);将图平移到x,y坐标处。
canvas绘图一般都从0,0点开始，然后平移到应在的位置。因为canvas的缩放、平移、旋转等操作都是已原点为基准点。
绘制前先context.save()保存当前绘图状态，最后再context.restore()恢复原有绘图状态。这样本次绘制所做的缩放旋转就不会影响下次绘制的内容了。
7、路径
moveTo(x, y)：不绘制，只是移动到目标坐标x,y。
lineTo(x, y)：不仅移动到新坐标x,y，而且在两坐标间画一条直线。
8、其他操作
canvas画图可以写一本书，并且确实有很多相关方面的书。这里就不详细记录了。本书后面介绍了一些画线样式、填充区域、绘制曲线、插入图片、渐变、旋转、插入文本、阴影等效果操作。
9、像素数据
Canvas API最有用的特性之一是允许开发人员直接访问canvas底层像素数据，这种访问是双向的。
获取像素数据：
conext.getImageData(sx, sy, sw, sh) 这个函数返回当前canvas状态并以数值数组的方式显示。
将图像数据应用于canvas：
context.putImageData(imagedata, dx, dy) dx,dy为偏移量。
创建空图像数据：context.createImagedData(sw, sh)
还有一种将图像数据转成文本格式的方法：canvas.toDataURL(type)
传入开发者期望的由canvas数据生成的图像类型为参数，如：image/png或image/jpeg
10、Canvas安全机制
如果canvas中的图像来自其他域，就会抛出安全异常。
11、进阶功能之全页玻璃窗
可以将canvas应用于这个浏览器窗口或者其中一部分上——这种技术通常被称作“玻璃窗”。一个应用是获取页面中所有DOM元素的绝对位置后，创建循序渐进的帮助功能，从而引导Web应用的用户，一步一步地教他们学会操作。因为canvas会阻塞后续的时间访问。
二、SVG
SVG内容就是一段定义严格的XML代码。其中的元素可以被js访问，文本可以被选中（canvas中的不行，因为他们是图形）。也有一些旋转、渐变的效果操作。
SVG长期以来都是矢量图形的标准格式，所以在图像处理方面有很多工具可以使用。比如开源的svg-edit(https://code.google.com/p/svg-edit/)
原文链接：
相关文章
精彩导读
热门资讯
关注我们
