问题是:在 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 ©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();
}
最佳答案
将您的 TreeMap 代码放在 slope.onload 函数中。
正在发生的事情的逐步分解:
- 您向服务器发出请求，并告诉您的计算机在图像加载后在 Canvas 上绘制图像。
- 你画树。
- 图像加载，图像绘制在树上。
如果将树绘制代码添加到图像的 onload 函数中，将会发生什么的分步说明:
- 您向服务器发出请求，并告诉您的计算机等待图像加载。当它加载...
- 绘制图像。
- 画树。
- 图像加载，并发生这种情况:
- 图像已绘制。
- 树被绘制在图像上。
关于javascript - 如何在 Canvas 中绘制一个形状(多边形)并在其后面放置一个图像。形状应该在顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41177221/