動畫對象的畫布

的jsfiddle內：http://jsfiddle.net/Z2YSt/173/動畫對象的畫布

代碼：

function createShipMissil(x, y, imgw, imgh) { 
      MissileCtx.save(); 
      MissileCtx.clearRect(0, 0, imgw, imgh); 
      MissileCtx.fillStyle = "rgba(0,200,0,1)"; 
      MissileCtx.fillRect(x, y, imgw, imgh); 
      MissileCtx.restore(); 
      y -= 1; 
      setTimeout(function() { createShipMissil(x, y, imgw, imgh); }, 30); 

     }

我的問題是，當繪製直線，看起來連續的。我怎樣才能改變它，使它看起來像一個矩形移動？

來源

2013-07-29 Sora

試試這個：

MissileCtx.clearRect(x, y, 1, 30);

Demo

來源

2013-07-29 12:52:12 Sergio

有沒有辦法讓它變得更快一點？ – Sora

@Sora，這是另一種使它更快的方法：http://jsfiddle.net/hfDhA/ – Sergio

通常僅在畫布上繪製ADDS新圖形 - 要製作動畫，您必須在每幀中擦除背景。具體來說，你需要有一個反覆呼籲平局功能：

清除畫布（畫一個大的背景色長方形或任何你想要的背景下）
然後繪製所有正在移動的對象。

使用固定的時間段（30毫秒爲你做的）有各種各樣的問題 - 一旦你得到這個工作，圍繞堆棧溢出的樣子弄清楚如何將此幀率瀏覽器重繪週期相匹配。

來源

2013-07-29 12:48:57 Elemental

context.clear（）或context.clearRect（0，0，canvas.width，canvas.height）如果前面不存在。 – Virus721

動畫對象的畫布

回答

相關問題