注冊(cè)|登錄

聯(lián)系電話:024-31891684  13390130939
沈陽(yáng)軟件公司--沈陽(yáng)軟件定制

沈陽(yáng)軟件開發(fā)_沈陽(yáng)軟件公司_沈陽(yáng)軟件定制/軟件/最新技術(shù)

Latest technology最新技術(shù)

HTML5 Canvas動(dòng)畫設(shè)計(jì)解析

瀏覽量:3036

HTML5 Canvas動(dòng)畫設(shè)計(jì)解析

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

其中最大的限制就是Canvas元素中的圖形一經(jīng)繪制就不會(huì)改變,除非你要人為改變它。如果我們需要改變Canvas元素中繪制的圖形,我們就必須先重繪相應(yīng)的圖形。重繪復(fù)雜的圖形會(huì)花費(fèi)掉很多的時(shí)間,因此動(dòng)畫效果也將受限于電腦的速度。

實(shí)現(xiàn)動(dòng)畫的原理

1、重繪canvas

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

2、保存canvas狀態(tài)

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

3、繪制移動(dòng)中的圖形

在這一步驟里才真正畫出需要移動(dòng)的圖形。

4、讀取canvas狀態(tài)

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

動(dòng)畫的操控

 

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

 


圖形是以直接使用canvas方法或調(diào)用自訂的函數(shù)所繪制的。在正常情況下,當(dāng)JavaScript執(zhí)行完成時(shí),我們就能看見呈現(xiàn)在canvas上的結(jié)果。

我們需要一個(gè)方法,能在一段時(shí)間內(nèi)循環(huán)執(zhí)行我們的繪圖函數(shù)。有兩個(gè)方法可操控這樣的動(dòng)畫。首先,這里有setInterval和setTimeout函數(shù),可用來在指定的時(shí)間內(nèi)調(diào)用特定的函數(shù)。

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

復(fù)制代碼



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

  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. }

沈陽(yáng)團(tuán)購(gòu)網(wǎng)|營(yíng)口網(wǎng)站制作|沈陽(yáng)軟件公司|軟件定制|網(wǎng)站建設(shè)|加盟易勢(shì)|提交問題

主站蜘蛛池模板: 美女脱了内裤张开腿让男人桶网站| 98精品国产高清在线看入口| 晓青老师的丝袜系列| 亚洲精品字幕在线观看| 精品少妇人妻AV一区二区三区| 国产成a人亚洲精v品无码| 2020国产精品永久在线| 大香焦伊人久久| 三年在线观看免费观看完整版中文 | 日韩av无码一区二区三区 | 国产乱子伦农村xxxx| 性xxxxfeixxxxx欧美| 国产美女视频网站| gdianav| 忍者刺客在线观看完整中文免费版| 久久久久噜噜噜亚洲熟女综合 | 国产一区二区精品久久凹凸| 黑料不打烊tttzzz网址入口| 国产精品夜色一区二区三区| 99精品在线视频| 好男人社区视频在线观看| 中文字幕三级电影| 日本三级2021最新理论在线观看| 九九视频在线观看视频6| 欧美在线性爱视频| 亚洲精品动漫免费二区| 男人日女人app| 免费高清a级毛片在线播放| 美女网站在线观看视频免费的| 国产亚洲一区二区手机在线观看 | 扒美女内裤摸她的机机| 久久人妻夜夜做天天爽| 日韩毛片无码永久免费看| 亚洲一区中文字幕在线观看| 欧美日韩一区二区三| 亚洲码在线中文在线观看| 澳门开奖结果2023开奖记录今晚直播视频 | 亚洲激情电影在线| 热带雨电影无删减在线播放| 免费A级毛片无码免费视频| 精品一区二区在线观看1080p|