对ｃａｎｖａｓ的直接在画布上绘制图形与用变换的方式（translate）绘制图形的不同点和相同点的理解
一、下面是使用两种方法绘制一条对角线，请看下面代码的区别：
１、ｃａｎｖａｓ直接在画布上绘制图像
代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>canvas绘制对角线</title> 6 </head> 7 <body> 8 <canvas id="canvas" width="400px" height="400px" style="border:1px solid black">您老人家该换浏览器了</canvas> 9 <script> 10 function drawDiagonal(){ //绘制对角线的函数 11 var canvas = document.getElementById("canvas"); 12 var context = canvas.getContext("2d"); 13 14 context.beginPath(); 15 context.moveTo(70,140); 16 context.lineTo(140,70); 17 context.strokeStyle = "#ABCDEF"; 18 context.stroke(); 19 context.closePath() 20 } 21 window.addEventListener("load",drawDiagonal(),true); //页面加载完成，执行该函数 22 </script> 23 </body> 24 </html>
说明：直接在画布里绘制，只要把绘制路径包含在ｂｅｇｉｎＰａｔｈ（）和ｃｌｏｓｅＰａｔｈ（）之间就可以了。
２、ｃａｎｖａｓ在画布上使用变换——ｔｒａｎｓｌａｔｅ绘制图像
代码如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>canvas变换实现绘制对角线</title> 6 </head> 7 <body> 8 <canvas id="canvas" width="400px" height="400px" style="border:1px solid black"></canvas> 9 <script> 10 function drawDiagonal(){ 11 var canvas = document.getElementById("canvas"); 12 var context = canvas.getContext("2d"); 13 14 //保存当前上下文环境 15 context.save(); 16 //绘制图像 17 context.translate(70,140); //重置坐标原点，此时（70,140）实际上是我们要绘制的的图像的（0,0）点 18 19 context.beginPath() 20 context.moveTo(0,0); 21 context.lineTo(70,-70); 22 context.strokeStyle = "#ABCDEF"; 23 context.stroke(); 24 context.closePath(); 25 //恢复上下文环境 26 context.retore; 27 } 28 window.addEventListener("load",drawDiagonal(),true); 29 </script> 30 </body> 31 </html>
说明：1、ｃａｎｖａｓ使用变换在画布上绘制，此时要先保存上下文环境－＞绘制－＞恢复上下文环境(save->translate->retore)
2、图解重置坐标原点
从上面的代码也看到，moveTo(0,0)，也就说明了在此时把重置后的（70,140）看成是坐标原点。
为什么呢?这样做事有原因，我在书里看到其中一个原因是这样说的，这两种方法看起来，会让人误认为使用变换会增加了不必要的复杂性，事实并非如此，两种方法都可以实现绘制图像，但是后者更有利于实现复杂图像的绘制。另外，关于代码可重用性来说，坐标设置为（0,0）更有利于重用。
二、二者之间的区别
直接绘制是不需重置坐标原点，使用变化需要translate，重置坐标原点；
三、二者之间的联系
都可以绘制图像，只是translate更利于绘制复杂图像。
四、补充
丛浩老师的HTML5的教学视频中，在讲变换这节课时，把这个过程保存上下文环境－＞绘制－＞恢复上下文环境(save->translate->retore)，生成的那个画布环境叫做
异次元空间，我的理解可能就是，原来的那个上下文环境被保存，重置坐标原点后的那个环境是不同于上下文环境的，也就是一个不同的空间，是一个密封的空间，就像是一个异次元一样，只有等我们这个图像绘制完成，才释放出来，也就是恢复最开始那个上下文环境。