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