javascript - 如何在 Canvas 中绘制一个形状(多边形)并在其后面放置一个图像。形状应该在顶部-6ren

javascript - 如何在 Canvas 中绘制一个形状(多边形)并在其后面放置一个图像。形状应该在顶部

转载作者：行者123 更新时间：2023-11-30 15:38:36

问题是:在 Canvas 中绘制的树木出现在斜坡图像的后面。我想要斜坡图像顶部的树木。
我怎么做？我已经尝试将图像代码放在树木代码之后，但它仍然没有出现在树木后面。

这是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();
}