html5canvas移動(dòng)

html5canvas移動(dòng)

ID：2402181

大?。?0.66 KB

頁(yè)數(shù)：3頁(yè)

時(shí)間：2017-11-15

html5canvas移動(dòng)_第1頁(yè)
html5canvas移動(dòng)_第2頁(yè)
html5canvas移動(dòng)_第3頁(yè)
資源描述：

《html5canvas移動(dòng)》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

1、HTML5Canvas移動(dòng)2011-12-2215:17:49????我來(lái)說(shuō)兩句?收藏????我要投稿???[字體：小?大]移動(dòng)Context對(duì)象可以通過(guò)調(diào)用translate()方法來(lái)移動(dòng)Canvas畫(huà)布中坐標(biāo)原點(diǎn)的位置。translate()方法的原型如下：voidtranslate(x,y);用于將該Context對(duì)象所對(duì)應(yīng)的Canvas的(0,0)點(diǎn)移動(dòng)到(x,y)點(diǎn)，并將其作為新的(0,0)點(diǎn)。通過(guò)試驗(yàn)表明，translate()方法是通過(guò)把當(dāng)前(0,0)點(diǎn)設(shè)置為(-x,-y)點(diǎn)來(lái)實(shí)現(xiàn)這種移動(dòng)的，并且改變后坐標(biāo)原點(diǎn)將會(huì)影響由該Canvas對(duì)象生成的其它Context對(duì)象。但

2、是，與Canvas中其它操縱圖像的方法一樣，translate()也只會(huì)影響移動(dòng)后繪制的圖形，對(duì)已經(jīng)繪制到畫(huà)布中的圖形無(wú)效。下面的示例展示了移動(dòng)的效果：????????????????

Yourbrowserdoesnotsupportthecanvaselement!

????????????????????????varcanvas=document.getE

3、lementById("canvas");????????varcontext2D=canvas.getContext("2d");?????varpic=newImage();?????pic.src="milaoshu.jpg";?//注意目錄結(jié)構(gòu)，這里是把圖片和html放在一個(gè)目錄的?????????//注意下面方法中畫(huà)筆狀態(tài)的保護(hù)，這在很多情況下都會(huì)使用到????functiondraw(){????????context2D.clearRect(0,0,600,400);????????context2D.save();//保存畫(huà)筆狀態(tài)????????context2D.t

4、ranslate(600/2*Math.random(),400/2*Math.random());//開(kāi)始移動(dòng)畫(huà)筆????????context2D.drawImage(pic,0,0);????????context2D.restore();//繪制結(jié)束以后，恢復(fù)畫(huà)筆狀態(tài)????}??????????????????setInterval(draw,1000);????????????????????

5、?????

Yourbrowserdoesnotsupportthecanvaselement!

??????????????varcanvas=document.getElementById("canvas");????varcontext2D=canvas.getContext("2d");?varpic=newImage();?pic.src="milaoshu.jpg";?//注意目錄結(jié)構(gòu)，這里是把圖片和html放在一個(gè)目錄的??//注意下面方法中畫(huà)筆狀態(tài)的保護(hù)，這在很多情況下都會(huì)使用到?

6、functiondraw(){??context2D.clearRect(0,0,600,400);??context2D.save();//保存畫(huà)筆狀態(tài)??context2D.translate(600/2*Math.random(),400/2*Math.random());//開(kāi)始移動(dòng)畫(huà)筆??context2D.drawImage(pic,0,0);??context2D.restore();//繪制結(jié)束以后，恢復(fù)畫(huà)筆狀態(tài)?}???????setInterval(draw,1000);????效果圖：?由于是動(dòng)態(tài)的，看不出效果，抱歉

7、。?摘自馮小衛(wèi)

當(dāng)前文檔最多預(yù)覽五頁(yè)，下載文檔查看全文

此文檔下載收益歸作者所有

當(dāng)前文檔最多預(yù)覽五頁(yè)，下載文檔查看全文
溫馨提示：
1. 部分包含數(shù)學(xué)公式或PPT動(dòng)畫(huà)的文件，查看預(yù)覽時(shí)可能會(huì)顯示錯(cuò)亂或異常，文件下載后無(wú)此問(wèn)題，請(qǐng)放心下載。
2. 本文檔由用戶上傳，版權(quán)歸屬用戶，天天文庫(kù)負(fù)責(zé)整理代發(fā)布。如果您對(duì)本文檔版權(quán)有爭(zhēng)議請(qǐng)及時(shí)聯(lián)系客服。
3. 下載前請(qǐng)仔細(xì)閱讀文檔內(nèi)容，確認(rèn)文檔內(nèi)容符合您的需求后進(jìn)行下載，若出現(xiàn)內(nèi)容與標(biāo)題不符可向本站投訴處理。
4. 下載文檔時(shí)可能由于網(wǎng)絡(luò)波動(dòng)等原因無(wú)法下載或下載錯(cuò)誤，付費(fèi)完成后未能成功下載的用戶請(qǐng)聯(lián)系客服處理。