如何繪製放置在畫布後面的圖像（多邊形）。形狀應該在頂部

現在的問題是：畫在畫布上的樹出現在斜坡的圖像後面。我想要樹形圖像的頂部。
我該怎麼做？我試過把圖像代碼放在樹代碼後面，但它仍然沒有出現在樹後面。如何繪製放置在畫布後面的圖像（多邊形）。形狀應該在頂部

這是index.html文件

<!doctype HTML> 
    <html lang="en"> 
    <head> 
      <meta charset="utf-8"> 
      <title>Cable Car</title> 
      <meta name="Description" content="Using Canvas"> 
      <meta name="robots" content="noindex"> 
      <script src="scripts/stackoverflow.js" type="text/javascript"></script> 
    </head> 
    <body> 
      <header role="banner"> 
       <h1>Canvas and animation</h1> 
       <hr> 
      </header> 

      <main> 
      <article> 
       <canvas id="canvas" width="650" height="350"></canvas> 
      </article> 
      </main> 

    <footer role="contentinfo"> 
    <hr> 
    <p><small> 
    Copyright &copy;2016. All rights reserved</small> 
    </p> 
    </footer> 
    </body> 
    </html>

下面是JS（JavaScript）的文件

window.onload = function(){   
    var cnv = document.getElementById('canvas'); 
    var ctx = cnv.getContext('2d'); 

    //drawing the snow filled slopes - an image 
    var cnvslope = document.getElementById('canvas'); 
    var ctxslope = cnvslope.getContext('2d'); 

    //the slope image 
    var slope = new Image(); 
    slope.src = "images/slope11.png"; 
    slope.onload = function(){ 
     ctxslope.drawImage(slope,412,153,slope.width,slope.height); 
    } 

    var cnvTrees = document.getElementById('canvas'); 
    var ctxTrees = cnvTrees.getContext('2d'); 

    //drawing the trees - 2nd from extreme right 
    ctxTrees.strokeStyle='green'; 
    ctxTrees.lineWidth='1'; 
    ctxTrees.beginPath(); 
    ctxTrees.fillStyle = 'green'; 
    ctxTrees.moveTo(450,200); 
    ctxTrees.lineTo(485,235); 
    ctxTrees.lineTo(415,235); 
    ctxTrees.closePath(); 
    ctxTrees.fill(); 
    ctxTrees.stroke(); 

    //drawing the trees - 2nd from extreme right 
    ctxTrees.strokeStyle='green'; 
    ctxTrees.lineWidth='1'; 
    ctxTrees.beginPath(); 
    ctxTrees.fillStyle = 'green'; 
    ctxTrees.moveTo(450,225); 
    ctxTrees.lineTo(505,275); 
    ctxTrees.lineTo(395,275); 
    ctxTrees.closePath(); 
    ctxTrees.fill(); 
    ctxTrees.stroke(); 

    //drawing the trees - 2nd from extreme right 
    ctxTrees.strokeStyle='green'; 
    ctxTrees.lineWidth='1'; 
    ctxTrees.beginPath(); 
    ctxTrees.fillStyle = 'green'; 
    ctxTrees.moveTo(450,260); 
    ctxTrees.lineTo(530,340); 
    ctxTrees.lineTo(370,340); 
    ctxTrees.closePath(); 
    ctxTrees.fill(); 
    ctxTrees.stroke(); 

    //drawing the trees - small tree-1st from extreme right 
    ctxTrees.strokeStyle='green'; 
    ctxTrees.lineWidth='1'; 
    ctxTrees.beginPath(); 
    ctxTrees.fillStyle = 'green'; 
    ctxTrees.moveTo(600,250); 
    ctxTrees.lineTo(610,260); 
    ctxTrees.lineTo(590,260); 
    ctxTrees.closePath(); 
    ctxTrees.fill(); 
    ctxTrees.stroke(); 


    //drawing the trees - 1st from extreme left 
    ctxTrees.strokeStyle='green'; 
    ctxTrees.lineWidth='1'; 
    ctxTrees.beginPath(); 
    ctxTrees.fillStyle = 'green'; 
    ctxTrees.moveTo(600,255); 
    ctxTrees.lineTo(620,275); 
    ctxTrees.lineTo(580,275); 
    ctxTrees.closePath(); 
    ctxTrees.fill(); 
    ctxTrees.stroke(); 

    //drawing the trees - small tree- 1st from extreme right 
    ctxTrees.strokeStyle='green'; 
    ctxTrees.lineWidth='1'; 
    ctxTrees.beginPath(); 
    ctxTrees.fillStyle = 'green'; 
    ctxTrees.moveTo(600,265); 
    ctxTrees.lineTo(635,300); 
    ctxTrees.lineTo(565,300); 
    ctxTrees.closePath(); 
    ctxTrees.fill(); 
    ctxTrees.stroke(); 

    //drawing the trees - small tree-1st from extreme right-4th 

    ctxTrees.strokeStyle='green'; 
    ctxTrees.lineWidth='1'; 
    ctxTrees.beginPath(); 
    ctxTrees.fillStyle = 'green'; 
    ctxTrees.moveTo(600,285); 
    ctxTrees.lineTo(650,335); 
    ctxTrees.lineTo(550,335); 
    ctxTrees.closePath(); 
    ctxTrees.fill(); 
    ctxTrees.stroke(); 
}

來源

2016-12-16 sparkle

把你的樹的繪製代碼的slope.onload函數內。

步驟一步擊穿這是怎麼回事的：

您對服務器的請求，並告訴您的計算機圖像加載後，在畫布上繪製圖像。
你畫樹。
圖像加載時，圖像被繪製在樹上。

步驟一步什麼會發生，如果樹繪製代碼被添加到圖像的onload功能：

您對服務器的請求，並告訴您的計算機等待圖像加載。當它加載時...
1. 繪製圖像。
2. 畫樹。
圖像加載，並且出現這種情況：
1. 圖像繪製。
2. 樹被繪製在圖像上。

來源

2016-12-16 04:29:39

沒問題，樂意幫忙！ –

如何繪製放置在畫布後面的圖像（多邊形）。形狀應該在頂部

回答

相關問題