イメージをキャンバスに置いた形の（ポリゴン）を描く方法。形状は上にあるべきです

質問は：キャンバスに描かれた木が斜面のイメージの後ろに現れていることです。私は斜面の上に木が欲しい。
どうすればよいですか？私は、木のコードの後にイメージコードを配置しようとしましたが、まだツリーの後ろには表示されません。イメージをキャンバスに置いた形の（ポリゴン）を描く方法。形状は上にあるべきです

これは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（ジャバスクリプト）がslope.onload関数内で、あなたの木の描画コードを入れ

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

ファイルです。何が起こっているの

ステップバイステップ内訳：

あなたがサーバーに要求を行い、画像をロードした後、キャンバス上の画像を描画するために、コンピュータを教えてください。
木を描画します。
イメージが読み込まれ、イメージがツリー上に描画されます。

ステップバイステップはツリー描画コードは画像のonload機能に追加された場合に何が起こるかの：

あなたがサーバーに要求を行い、にコンピュータを教えて画像が読み込まれるまで待ちます。ロードするとき...
1. 画像を描画します。
2. 木を描画します。
画像負荷、及びこれが起こる：
1. 画像が描画されます。
2. ツリーは画像上に描画されます。

出典

2016-12-16 04:29:39

問題なく、喜んで手伝ってください！ –

イメージをキャンバスに置いた形の（ポリゴン）を描く方法。形状は上にあるべきです

答えて

関連する問題