圖片按畫面動畫與畫布

僅用於在畫布上繪製圖像，我很想製作一幀一幀的動畫，但到目前爲止，我的谷歌沒有任何結果或答案是模糊的。這裏是代碼。我的javascript的圖片按畫面動畫與畫布

<script> 
     function drawOnCanvas() { 
      var firstImg=1; 
      var lastImg=75; 
     var ctx=document.getElementById("mycanvas").getContext('2d'); 
     var image=new Image(); 
     image.src="iglesiafls75.png"; 
     image.onload=function() { 
      ctx.drawImage(image,0,0,550,800,0,0,550,800); 
     } 
     } 

     window.addEventListener('load', drawOnCanvas, true); 
    </script>

的形象是75個部分，我想知道如何使然後閱讀畫布，因爲它是由幀動畫，任何想法正規框架。

來源

2012-10-09 Gustavo Duenas

1）不要在功能中獲得畫布 - 這會變得很笨。

// instead of 
function() { 
    var ctx = document.get......; 
} 

// do this 
var ctx = document.getElement... 
function draw() { ctx.drawImage(); } 

// or 
var ctx... 
function draw (context) { context.drawImage(); } 
draw(ctx);

它不必是全球性的 - 只是不把它裏面，我們在調用每秒60次的功能。

2）你不能用圖像做到這一點。在可以使用之前，圖片需要100％下載。
你所擁有的功能將會在1/1000秒內完成。這還沒有足夠的時間開始下載您的圖像。

因此，爲您的圖像製作加載系統，當它們全部加載時，然後開始您的畫布動畫。

3）在管理圖像繪製方面，無論是要在每一幀之間切換圖片，還是要使用圖片集，並切換座標以指向適當的部分（如動畫條紋或紋理貼圖）。 4）循環，您將使用window.requestAnimationFrame（當前爲「webkitRequestAnimationFrame」，mozRequest ...，msRequest ...）或setTimeout。

來源

2012-10-09 06:43:08 Norguard

變種CTX =的document.getElementById（「mycanvas）.getContext（ '2D'）; VAR圖像=新的圖像（）; VAR firtImg = 1; 變種lastImg = 75; window.requestAnimFrame =（功能（回調） { 返回window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || 函數（回調） { window.setTimeout（回調， 1000/60）; }; } ）（）; 功能負載（）{// 環這裏用於裝載系統如果（firstImg

這是我至今感謝 –

代碼BTW我有這樣的代碼，但它不工作的時候幫我看看，爲什麼請， –

圖片按畫面動畫與畫布

回答

相關問題