2012-04-27 151 views
1

JavaScript遠非我的優勢之一;因此,如果我的問題似乎對你們許多人來說是非常補救的道歉。通過Javascript和HTML5更新背景圖片Canvas

我試圖通過Javascript和HTML5 Canvas實現Boids。雖然植絨行爲已經確立,但應用程序看起來相當簡單,只是空白的背景。

由於這個原因,我試圖使用一個圖像作爲我的背景,但我有困難。

this.draw = function() { 
     /* First clear everything */ 
     this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); 

     /* And ink them */ 
     this.context.strokeStyle = "#000"; 
     this.context.stroke(); 

     /* Draw each boid */ 
     for(var i in this.boids) { 
      this.boids[i].draw(this.context, this.size); 
     } 
    } 

如果任何人有如何將上述功能內繪製背景圖像的知識,請你能告訴我:)

+0

你能告訴我們一些周圍的代碼嗎?什麼對象是「這個」? – Bergi 2012-04-27 12:39:20

+0

「this」與控制演示文稿的Arena對象有關。它在HTML中被調用: var canvasElement = document.getElementById(「boids」); arena = new Arena(canvasElement,8,8); – 2012-04-27 12:42:31

回答

3

而是在帆布做的,你可以更容易地設置在background-image在CSS:

http://jsfiddle.net/qwzBh/

這樣,你就不必擔心繪製這一切的時候。

+0

更好的建議 - 非常感謝你:) – 2012-04-27 14:44:29