Question

问题是：用画布绘制的树木出现在斜坡的图像后面。我希望树木在斜坡图像上方我怎么做？我已经尝试将图像代码放在树形代码之后，但它仍然没有出现在树后面。

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

Answer 1

将您的树形图代码放在slope.onload函数中。

逐步分析正在发生的事情：

您向服务器发出请求，并告诉您的计算机在图片加载后在画布上绘制图像。
你画树。
图像加载，图像在树上绘制。

如果将树形图代码添加到图像的onload函数中，将会发生的步骤：

您向服务器发出请求，并告诉您的计算机等待加载图像。当它加载......
1. 绘制图像。
2. 画树。
图像加载，发生这种情况：
1. 绘制图像。
2. 树木被画在图像上。

如何在画布中绘制一个带有图像的形状（多边形）。形状应该在顶部

1 个答案: