Canvas与SVG(Scalable Vector Graphics)的区别：
- Canvas是一个位图画布，其上绘制的图形不可缩放；SVG是矢量图可以放大缩小。
- Canvas绘制出的对象不属于页面DOM结构或者任何命名空间；SVG支持单机检测（能检测鼠标单机了图像上哪个对象）
- Canvas不需要存储图像中的对象所以性能非常好。
一、Canvas
1、元素：<canvas></canvas>
?
2、坐标：左上角坐标为原点，即x=0,y=0的点。
?
3、替代内容。
? ? ? 在不支持canvas的浏览器上需要显示提示或替代内容。如：
<canvas>
Update your browser to enjoy canvas
</canvas>
?
?4、检测浏览器支持情况
try {
document.createElement("canvas").getContext("2d");
document.getElementById("support").innerHTML =
"HTML5 Canvas is supported in your browser.";
} catch(e) {
document.getElementById("support").innerHTML =
"HTML5 Canvas is not supported in your browser.";
}
?
?5、划线
<canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas>
?
<script>
function drawDiagonal() {
//取得canvas元素及其绘图上下文
var canvas = document.getElementById('diagonal');
var context = canvas.getContext('2d');
//用绝对坐标来创建一条路径
context.beginPath();
context.moveTo(70,140);
context.lineTo(140, 70);
//将这条线绘制在canvas上
context.stroke();
}
window.addEventListener("load", drawDiagonal, true);
</script>
?一段简单的代码展示了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/)