JavaScript動(dòng)畫實(shí)例：轉(zhuǎn)呀轉(zhuǎn)_第1頁
JavaScript動(dòng)畫實(shí)例：轉(zhuǎn)呀轉(zhuǎn)_第2頁
JavaScript動(dòng)畫實(shí)例：轉(zhuǎn)呀轉(zhuǎn)_第3頁
JavaScript動(dòng)畫實(shí)例：轉(zhuǎn)呀轉(zhuǎn)_第4頁
JavaScript動(dòng)畫實(shí)例：轉(zhuǎn)呀轉(zhuǎn)_第5頁
已閱讀5頁，還剩5頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

1、JavaScript 動(dòng)畫實(shí)例：轉(zhuǎn)呀轉(zhuǎn)在 Canvas API 中，上下文CanvasRenderingContext2D 對象提供了一個(gè)與坐標(biāo)旋轉(zhuǎn)相關(guān)的方法：void rotate(in float angle); / 按給定的弧度順時(shí)針旋轉(zhuǎn)anglerotate()方法旋轉(zhuǎn)的中心始終是canvas的原點(diǎn)。如果要改變旋轉(zhuǎn)中心，需要使用translate方法。我們可以將繪制的圖形每隔一定的時(shí)間間隔后，旋轉(zhuǎn)一定的角度重新繪制一次，這樣就可以得到旋轉(zhuǎn)的動(dòng)畫效果。1 旋轉(zhuǎn)的扇葉將一個(gè)梯形按順時(shí)針旋轉(zhuǎn)90°的方式繪制4 次，可以繪制出一個(gè)扇葉圖案。將繪制的扇葉圖案每隔0.1 秒后順時(shí)針旋轉(zhuǎn)1

2、2°，重新繪制一遍，得到旋轉(zhuǎn)的扇葉動(dòng)畫。編寫如下的HTML 代碼。<!DOCTYPE html><head><title> 旋轉(zhuǎn)的扇葉</title><script type="text/javascript">var context;var i;function draw(id) var canvas = document.getElementById(id);if (canvas = null)return false;context = canvas.getContext('2d')

3、;i=3;setInterval(move,100);function move()context.clearRect(0,0,400,300);context.save();context.fillStyle = 'green'context.translate(100,100);context.rotate(i*Math.PI/45)drawLeaf();i+=3;if (i>=90) i=3;context.restore();function drawLeaf() / 繪制扇葉context.save();for (var j=0;j<4;j+)contex

4、t.rotate(Math.PI/2);context.beginPath();context.moveTo(-20,-80);context.lineTo(0,-80);context.lineTo(0,0);context.lineTo(-30,0);context.closePath();context.fill();context.restore();</script></head><body onload="draw('myCanvas');"><canvas id="myCanvas"

5、 width="200" height="200" style="border:3px double #996633;”></canvas></body></html>將上述HTML代碼保存到一個(gè)html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，可以在瀏覽器窗口中看到扇葉的旋轉(zhuǎn)動(dòng)畫，如圖 1所示。圖1旋轉(zhuǎn)的扇葉2 .旋轉(zhuǎn)的五角星將繪制的五角星圖案每隔0.1秒后順時(shí)針旋轉(zhuǎn)12。，重新繪制一遍，得到旋轉(zhuǎn)的五角星動(dòng)畫。編寫如下的HTML代碼。<!DOCTYPE html>&l

6、t;head><title>旋轉(zhuǎn)的五角星</title><script type="text/javascript">var context;var i;function draw(id)var canvas = document.getElementById(id);if (canvas = null)return false;context = canvas.getContext('2d');i=3;setInterval(move,100);function move()context.clearRect(0,

7、0,400,300);context.save();context.fillStyle = 'green'context.translate(100,100);context.rotate(i*Math.PI/45)drawStar(80);i+=3;if (i>=90) i=3;context.restore();function drawStar(r) / 繪制五角星圖案context.save();context.fillStyle="red"context.beginPath();context.moveTo(r,0);for (var i=0

8、;i<9;i+)context.rotate(Math.PI/5);if(i%2 = 0)context.lineTo(r/2),0);elsecontext.lineTo(r,0);context.closePath();context.fill();context.restore();</script></head><body onload="draw('myCanvas');"><canvas id="myCanvas" width="200" height=&qu

9、ot;200" style="border:3px double #996633;”></canvas></body></html>將上述HTML代碼保存到一個(gè) html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，可以在瀏覽器窗口中看到五角星的旋轉(zhuǎn)動(dòng)畫，如圖 2所示。圖2旋轉(zhuǎn)的五角星3 .旋轉(zhuǎn)的正六邊形漩渦我們先來畫一個(gè)正六邊形。這樣作圖，設(shè)從起點(diǎn)向繪圖方向畫一條長為i的線段，將線段的終點(diǎn)設(shè)為新的起點(diǎn)，同時(shí)繪圖方向旋轉(zhuǎn)60。，再畫一條長為i+1的線段，重復(fù)這樣的過程共繪制六條線段，則這六條線段構(gòu)成一個(gè)正六邊形。編

10、寫HTM戊件內(nèi)容如下。<!DOCTYPE html><head><title> 正六邊形 </title>script type="text/javascript"> function draw(id) var canvas=document.getElementById(id);if (canvas=null) return false;var context=canvas.getContext('2d');context.fillStyle="#EEEEFF"context.fil

11、lRect(0,0,400,400);context.translate(canvas.width/2, canvas.height/2);var colors = 'red','yellow', 'green', 'cyan','blue', 'purple'for (i =150; i < 156; i+) context.strokeStyle = colorsi % 6;context.lineWidth = 2;context.beginPath();context.moveTo(0

12、, 0);context.lineTo(0, i/2);context.stroke();context.translate(0, i/2);context.rotate(-60 * (2 * Math.PI / 360); </script></head><body onload="draw('myCanvas');"><canvas id="myCanvas" width="400" height="400" style="border:3px

13、 double #996633;”></canvas></body></html>將上述HTML代碼保存到一個(gè)html文本文件中，再在瀏覽器中打開包含這段 HTML代碼的html文件，可以在畫布中繪制一個(gè)正六邊形圖案，如圖 3所示。圖3 一個(gè)正六邊形繪制圖3的程序中，循環(huán)進(jìn)行了 6次，只繪制6條邊。若修改"for(i =150; i < 156; i+)” 語句為“ for (i =150; i < 180; i+) : 使得循環(huán)進(jìn)行 30次，則在畫布中繪制出如圖 4所示的 圖案，該圖案有5個(gè)六邊形圍成。若修改語句為"f

14、or (i =0; i < 360; i+) ”，則在畫布中繪制 出如圖5所示的六邊形圖案。圖4 5個(gè)六邊形圍成的圖案圖5正六邊形生成圖5圖案的程序中，繪圖時(shí)旋轉(zhuǎn)的角度為60。，若將旋轉(zhuǎn)角度改成 59。，即將語句 “context.rotate(-60 * (2 * Math.PI / 360); ”修改為 “ context.rotate(-59 * (2 * Math.PI / 360); ”， 則在畫布中繪制出如圖 6所示的正六邊形漩渦。圖6正六邊形漩渦將圖6的正六邊形漩渦旋轉(zhuǎn)起來。編寫如下的HTML文件。<!DOCTYPE html><head><t

15、itle>旋轉(zhuǎn)的正六邊形漩渦</title>script type="text/javascript">var context;var count;function draw(id) var canvas = document.getElementByld(id);if (canvas = null) return false;context = canvas.getContext('2d');count=3;setInterval(move,100);function move()context.clearRect(0,0,400,

16、400);context.save();context.translate(200, 200);context.rotate(count*Math.PI/45)drawSix();count+=3;if (count>=90) count=3;context.restore();function drawSix() / 繪制正六邊形漩渦圖案context.save();var colors = 'red','yellow', 'green', 'cyan','blue', 'purple' ;

17、for (i = 0; i < 360; i+)context.strokeStyle = colorsi % 6;context.lineWidth = i / 200 + 1;context.beginPath();context.moveTo(0, 0);context.lineTo(0, i/2);context.stroke();context.translate(0, i/2);context.rotate(-59 * (2 * Math.PI / 360);context.restore();</script></head><body onlo

18、ad="draw('myCanvas');"><canvas id="myCanvas" width="400" height="400" style="border:3px double #996633;"></canvas></body></html>將上述 HTML 代碼保存到一個(gè)html 文本文件中，再在瀏覽器中打開包含這段HTML代碼的 html 文件，可以在瀏覽器窗口中看到正六邊形漩渦的旋轉(zhuǎn)動(dòng)畫，如圖7 所示。圖

19、7 所示的動(dòng)畫顯得有些單調(diào)，我們修改上面的程序，使得在繪制正六邊形時(shí)的旋轉(zhuǎn)角度進(jìn)行變化，得到不斷轉(zhuǎn)呀轉(zhuǎn)的正六邊形。編寫的 HTML 文件內(nèi)容如下。這個(gè) HTML 文件的內(nèi)容與上一個(gè)HTML 文件內(nèi)容，修改了兩處，為方便讀者引用，還是給出完整文件內(nèi)容。圖7正六邊形漩渦的旋轉(zhuǎn)動(dòng)畫<!DOCTYPE html><head><title>旋轉(zhuǎn)的正六邊形漩渦</title>script type="text/javascript">var context;var count;function draw(id)var canvas

20、= document.getElementByld(id);if (canvas = null)return false;context = canvas.getContext('2d');count=0;setInterval(move,50);function move()context.clearRect(0,0,400,400);context.save();context.translate(200, 200);context.rotate(count*Math.PI/45)drawSix();count+;if (count>=360) count=0;context.restore();function drawSix() /繪制正六邊形漩渦圖案context.save();var colors = 'red','yellow', 'green', 'cyan','blue', 'purpl

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論