HTML5 Canvas API 变换(translate函数)
下面我們來看下在canvas上繪制圖像的另一種方式——變換(translate函數(shù)的應(yīng)用）：
下面的代碼：我們還是實現(xiàn)上篇文章的效果：畫一條斜線。理論上的知識，自己買書去看吧！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>轉(zhuǎn)換</title><style type="text/css">#diagonal{border: 1px solid red;width: 200px;height: 200px;}</style><script type="text/javascript">function drawDiagonal() {//取得canvas元素及其繪圖上下文var canvas = document.getElementById("diagonal");var context = canvas.getContext("2d");//保存當(dāng)前繪畫狀態(tài)，以便我們畫完這副畫以后，再恢復(fù)到這個狀態(tài)，畫另一副畫。context.save();//向右下方移動繪圖上下文
context.translate(70, 140);//以原點為起點，繪制與前面相同的線段
context.beginPath();context.moveTo(0, 0);context.lineTo(70, -70);//將這條線繪制到canvas畫布上去。 context.stroke();//恢復(fù)原有的繪圖狀態(tài)
context.restore();//可以開始另外一副繪圖。。。。。。
}window.addEventListener("load", drawDiagonal, true);</script> </head> <body> <canvas id="diagonal"></canvas> </body> </html>
（請注意加紅色背景的字）
1、首先通過ID找到并訪問canvas對象。
2、接著通過調(diào)用canvas對象的getContext函數(shù)獲取上下文對象。
3、接下來，保存尚未修改的context對象，這樣我們即使通過moveTo、lineTo、translate等操作后，我們還是可以恢復(fù)到這個狀態(tài)，然后開始繪畫另一個副圖，或者另外一些操作。
4、下一步是在context中調(diào)用translate函數(shù)。通過這個操作，當(dāng)進(jìn)行平移行為(moveTo)發(fā)生時，我們的提供的變換坐標(biāo)｛translate(70,140)｝會被加到結(jié)果坐標(biāo)｛moveTo(0,0)｝上去，結(jié)果移動到了坐標(biāo)點(70,140){即橫向：70，縱向：140}(我們暫時稱坐標(biāo)A吧)上面了。
5、上一步完成后，我們調(diào)用lineTo(70，-70)，意思是在上一個坐標(biāo)點(70,140)上橫向加70(70+70=140)，縱向減70(140-70=70)，于是我們得一點(140，70)(我們暫時稱為坐標(biāo)B吧),得到兩個坐標(biāo)點后，lineTo方法告訴我們用一條直線把A、B這兩個坐標(biāo)點連起來。
其它上篇已介紹過，就不多說了。如果覺得我理解錯了，希望你能幫我指出來。在這里我還要向?artwl 表示感謝，他對我上某篇文章寫的不好處的賜教。真心希望大家能賜教。。。。
?
轉(zhuǎn)載于:https://www.cnblogs.com/koeltp/archive/2012/09/29/2707913.html
總結(jié)
以上是生活随笔為你收集整理的HTML5 Canvas API 变换(translate函数)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： win7下计划任务schtasks使用详
- 下一篇： JS控制HTML元素的显示和隐藏