注冊|登錄

聯系電話:024-31891684  13390130939
沈陽軟件公司--沈陽軟件定制

沈陽軟件開發_沈陽軟件公司_沈陽軟件定制/軟件/最新技術

Latest technology最新技術

HTML5 Canvas動畫設計解析

瀏覽量:3035

HTML5 Canvas動畫設計解析

我們使用JavaScript操控canvas元素可以很容易做出可互動的動畫。但是當初canvas元素并不是為此而設計的(與Flash不同),因此存在一些限制。

其中最大的限制就是Canvas元素中的圖形一經繪制就不會改變,除非你要人為改變它。如果我們需要改變Canvas元素中繪制的圖形,我們就必須先重繪相應的圖形。重繪復雜的圖形會花費掉很多的時間,因此動畫效果也將受限于電腦的速度。

實現動畫的原理

1、重繪canvas

除非你會畫一些能夠填滿整個canvas的圖形(例如背景圖),否則你有必要清除先前繪制的所有圖形。而最簡單的方法是使用clearRect方法。

2、保存canvas狀態

如果你更動了任何一個會影響到canvas狀態的設定(樣式、變形等等),并且希望能夠確保每一次繪制畫格時都是原本的狀態,你就需要保存canvas狀態。

3、繪制移動中的圖形

在這一步驟里才真正畫出需要移動的圖形。

4、讀取canvas狀態

如果你先前保存過Canvas的狀態,就先在畫新的圖形之前讀取之前的狀態。

動畫的操控

 

2012-5-16 09:43:57 上傳

 


圖形是以直接使用canvas方法或調用自訂的函數所繪制的。在正常情況下,當JavaScript執行完成時,我們就能看見呈現在canvas上的結果。

我們需要一個方法,能在一段時間內循環執行我們的繪圖函數。有兩個方法可操控這樣的動畫。首先,這里有setInterval和setTimeout函數,可用來在指定的時間內調用特定的函數。

  1. setInterval(animateShape,500);
  2. setTimeout(animateShape,500);

復制代碼



如果你不需要和用戶互動,就最好使用setInterval函數,他會重復執行預先準備好的代碼。在上面的例子里,animateShape函數是每500毫秒(一秒的一半)執行一次。setTimeout函數只會在設定好的時間點上執行一次。
第二個方法是我們可以利用用戶的輸入來操控。如果我們想要制作游戲,我們可以使用鍵盤或滑鼠的事件來操控動畫。只需設定事件接收器(eventListener),我們就能捕捉任何的使用者動作,并執行我們的動畫函數。
動畫范例
在這個范例中,我們使用setInterval函數來操控動畫,使小型的太陽系模擬系統動起來。

  1. var sun = new Image();
  2. var moon = new Image();
  3. var earth = new Image();
  4. function init(){
  5. sun.src = 'images/sun.png';
  6. moon.src = 'images/moon.png';
  7. earth.src = 'images/earth.png';
  8. setInterval(draw,100);
  9. }
  10.  
  11. function draw() {
  12. var ctx = document.getElementById('canvas').getContext('2d');
  13.  
  14. ctx.globalCompositeOperation = 'destination-over';
  15. ctx.clearRect(0,0,300,300); // 清除canvas
  16.  
  17. ctx.fillStyle = 'rgba(0,0,0,0.4)';
  18. ctx.strokeStyle = 'rgba(0,153,255,0.4)';
  19. ctx.save();
  20. ctx.translate(150,150);
  21.  
  22. // 地球
  23. var time = new Date();
  24. ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() +
  25. ((2*Math.PI)/60000)*time.getMilliseconds() );
  26. ctx.translate(105,0);
  27. ctx.fillRect(0,-12,50,24); // 陰影
  28. ctx.drawImage(earth,-12,-12);
  29.  
  30. // 月球
  31. ctx.save();
  32. ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() +
  33. ((2*Math.PI)/6000)*time.getMilliseconds() );
  34. ctx.translate(0,28.5);
  35. ctx.drawImage(moon,-3.5,-3.5);
  36. ctx.restore();
  37.  
  38. ctx.restore();
  39.  
  40. ctx.beginPath();
  41. ctx.arc(150,150,105,0,Math.PI*2,false); // 地球軌道
  42. ctx.stroke();
  43.  
  44. ctx.drawImage(sun,0,0,300,300);
  45. }

沈陽團購網|營口網站制作|沈陽軟件公司|軟件定制|網站建設|加盟易勢|提交問題

主站蜘蛛池模板: 免费不卡在线观看av| 国产精品三级av及在线观看| 久久久久久久久久久久久久久| 欧美极品另类高清videos| 再深点灬舒服灬太大了快点| 青娱极品盛宴国产一区| 国产私拍福利精品视频网站| 99久久精品免费视频| 成人无码免费一区二区三区| 久久婷婷五月综合尤物色国产| 欧美午夜在线播放| 亚洲精品国产首次亮相| 粗大黑硬长爽猛欧美视频| 国产91精品一区| 香港三日本三级人妇三级99| 国产精品久久久久无码av| 97成人碰碰久久人人超级碰OO| 男人j放进女人p全黄| 四虎影视884aa·com| 韩国三级中文字幕hd久久精品 | 美女跪下吃j8羞羞漫画| 国产在线视频一区二区三区 | 日韩人妻无码一区二区三区久久 | 老鸦窝在线视频2021| 国产女人好紧好爽| 亚洲另类专区欧美制服| 国产青草视频在线观看免费影院| se94se欧美综合色| 岛国在线免费观看| 中文字幕久久综合| 日本一本高清视频| 久久婷婷激情综合色综合俺也去| 月夜直播手机免费视频高清| 亚洲国产美女精品久久久久 | 国产成人精品视频播放| 手机看片国产福利| 国产精品无码专区在线观看| 91在线播放国产| 大狠狠大臿蕉香蕉大视频| 一级毛片免费在线| 成人午夜短视频|