如何在画布中绘制形状（多边形）并在其后面放置图像的方法。形状应该在顶部

Question

The question is: the trees drawn in canvas are appearing behind the image of the slope. 问题是：在画布上绘制的树木出现在斜坡图像的后面。 I want the trees on top of the slope image. 我希望树木在坡度图像上方。
How do I do that? 我怎么做？ I have tried placing the image code after the trees code but its still not appearing behind the trees. 我尝试将图像代码放置在树木代码之后，但仍未出现在树木后面。

This is the index.html file 这是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>

Below is the js(javascript) file 以下是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();
}

Answer 1

Put your tree-drawing code inside the slope.onload function. 将您的树绘制代码放入slope.onload函数中。

Step-by-step breakdown of what's going on: 分步进行的细分：

You make a request to the server, and tell your computer to draw the image on the canvas after the image loads. 您向服务器发出请求，并告诉计算机在图像加载后在画布上绘制图像。
You draw trees. 你画树。
The image loads, the image is drawn over the trees. 图像加载后，图像绘制在树上。

Step-by-step of what would happen if the tree-drawing code was added to the image's onload function: 一步一步的，如果树的绘制代码被添加到图像的会发生什么onload功能：

You make a request to the server, and tell your computer to wait for the image to load. 您向服务器发出请求，并告诉您的计算机等待图像加载。 When it loads... 加载时...
1. Draw the image. 绘制图像。
2. Draw the trees. 画树。
The image loads, and this happens: 图像加载，并且发生这种情况：
1. The image is drawn. 绘制图像。
2. The trees are drawn over the image. 树木绘制在图像上。

如何在画布中绘制形状（多边形）并在其后面放置图像的方法。形状应该在顶部

问题描述

1 个解决方案

解决方案1
2 2016-12-16 04:29:39

如何在画布中绘制形状（多边形）并在其后面放置图像的方法。 形状应该在顶部

问题描述

1 个解决方案

解决方案1 2 2016-12-16 04:29:39

如何在画布中绘制形状（多边形）并在其后面放置图像的方法。形状应该在顶部

解决方案1
2 2016-12-16 04:29:39