如何將一個畫布上下文置於另一個上方？

我在畫布中使用了兩個圖像，現在我想將另一個圖像放在另一個圖像上，即。我想把飛機帶上天空，我該怎麼辦？如何將一個畫布上下文置於另一個上方？

這裏是我的代碼

var canvas = document.getElementById('canvas'); 
var skyContext = canvas.getContext('2d'); 
var planeContext = canvas.getContext('2d'); 
var sky = new Image(); 
sky.src = './images/m35.jpeg'; 
sky.onload = function() { 
    skyContext.drawImage(sky, 0, 0, 250, 250, 50, 50, 250, 250); 
} 

var plane = new Image(); 
plane.src = './images/space-ship.png'; 
plane.onload = function() { 
    planeContext.drawImage(plane, 0, 0, 70, 80, 50, 250, 70, 80); 
}

在上面的代碼，天空是在飛機的前方傳來讓飛機隱形。我也嘗試使用這樣的背景，但我無法將圖像置於另一個頂部。

來源

2017-04-20 Lijin Durairaj

做到這一點的最有效方式（特別是看起來像你正在創建遊戲）是使用兩個單獨的畫布元素，使用CSS定位在彼此的頂部。

例如：

var canvasMain = document.getElementById('canvasMain'); 
 
var canvasBackground = document.getElementById('canvasBackground'); 
 

 
var skyContext = canvasMain.getContext('2d'); 
 
var sky = new Image(); 
 
sky.src = 'https://i.stack.imgur.com/xjj19.jpg'; 
 
sky.onload = function() { 
 
    skyContext.drawImage(sky, 0, 0, 250, 250, 50, 50, 250, 250); 
 
} 
 

 
var planeContext = canvasBackground.getContext('2d'); 
 

 
var plane = new Image(); 
 
plane.src = 'https://i.stack.imgur.com/nHugQ.png'; 
 
plane.onload = function() { 
 
    planeContext.drawImage(plane, 0, 0, 70, 80, 50, 250, 70, 80); 
 
}

.canvas { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
}

<canvas id="canvasMain" class="canvas" width="700" height="500"></canvas> 
 
<canvas id="canvasBackground" class="canvas" width="700" height="500"></canvas>

來源

2017-04-20 13:08:10 almcd

正如您所說，我正在嘗試開發可讓我的飛機在畫布上移動的遊戲。如果我製作兩個畫布並將該平面放置在星系上，我該如何將該平面移動穿過銀河系？即。 planeContext.drawImage（planeImage，0，0，imgWidth，imgHeight，0，0，drawWidth，drawHeight）; 那我該怎麼做呢？ –

@LijinDurairaj總之，對於基本運動 - 使用'requestanimationframe'創建一個遊戲循環，並通過循環在每次迭代中增加飛船的x和y值。有關更多詳細信息，我建議將此作爲一個新問題發佈，然後我將盡力提供一個示例。 – almcd

與您的代碼的問題是，因爲天空圖像比平面圖像越大需要的圖像繪製加載一次，我會懷疑加載的時間越長，天空圖像的繪製次數就越多。

在畫布上繪製東西就像photoshop中的圖層，繪製的任何東西都會覆蓋前面繪製的東西。

可以爲天空和飛機使用相同的畫布，您只需要等到兩張圖片都加載完畢，然後按照正確的順序繪製它們，先繪製天空，然後再將飛機繪製在上面。

如果兩個對象位於同一畫布上，則不需要創建多個上下文（2只是指向同一位置），則可以爲這兩個對象使用相同的畫布上下文。通常，當我使用畫布工作時，我只是創建一個名爲ctx的上下文變量，因爲它總是比輸入context.etc快得多。

almcd答案是做到這一點的一種方式，雖然對我來說背景和主要都是顛倒的;我會把天空/銀河系放在背景上，並在主畫布上繪製飛機，但有更好的方法...

如果天空永不改變，甚至不需要2個畫布，只需要一個畫布背後的背景圖像;天空。當需要爲飛機設置動畫時，使背景變爲靜態圖像的方法意味着繪製遊戲循環的每個幀的次數減少，因此您將獲得更好的FPS。

對於你的解決方案，我認爲1個畫布的天空作爲CSS定位的背景圖像，只有在畫布上繪製的平面是最好的，這裏是代碼...

<!doctype HTML> 
<html> 
    <head> 
     <style> 
      #canvasContainer { 
       background-image: url('https://i.stack.imgur.com/xjj19.jpg'); 
       background-repeat: no-repeat; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="canvasContainer"> 
      <canvas id="canvas" width="1200" height="600"></canvas> 
     </div> 
     <script> 
      var canvas = document.getElementById('canvas'); 
      var ctx = canvas.getContext('2d'); 

      // Load the plane and draw it. 
      var plane = new Image(); 
       plane.src = 'https://i.stack.imgur.com/nHugQ.png'; 
       plane.onload = function() { 
        ctx.drawImage(plane, 100, 100); 
       } 
     </script> 
    </body> 
</html>

您可以通過更改繪製圖像所發送的100,100個參數來移動平面，因爲這些是用於定位平面圖像的左側和頂部。

親切的問候， DouG。

Winwheel.js的創建者是一個功能豐富的JavaScript庫，用於在HTML畫布上製作旋轉獎品輪。請參閱http://dougtesting.net

來源

2017-04-21 05:17:35

如何將一個畫布上下文置於另一個上方？

回答

相關問題