对ｃａｎｖａｓ的直接在画布上绘制图形与用变换的方式绘制图形的不同点和相同点的理解
对ｃａｎｖａｓ的直接在画布上绘制图形与用变换的方式（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)，生成的那个画布环境叫做
异次元空间，我的理解可能就是，原来的那个上下文环境被保存，重置坐标原点后的那个环境是不同于上下文环境的，也就是一个不同的空间，是一个密封的空间，就像是一个异次元一样，只有等我们这个图像绘制完成，才释放出来，也就是恢复最开始那个上下文环境。
