Javascript 如何在画布中绘制一个形状（多边形）并在其后面放置一个图像。形状应该在上面

问题是：画布上绘制的树木出现在斜坡图像的后面。我想要斜坡图像顶部的树。
我该怎么做？我试着把图像代码放在树代码之后，但它仍然没有出现在树后面

这是index.html文件

缆车
画布与动画



版权及副本；2016版权所有

下面是js（javascript）文件

window.onload=function（）{
var cnv=document.getElementById（'canvas'）；
var ctx=cnv.getContext（'2d'）；
//绘制积雪覆盖的斜坡-图像
var cnvslope=document.getElementById（'canvas'）；
var ctxslope=cnvslope.getContext（'2d'）；
//斜坡图像
var slope=新图像（）；
slope.src=“images/slope11.png”；
slope.onload=函数（）{
ctxslope.drawImage（斜率，412153，斜率.宽度，斜率.高度）；
}
var cnvTrees=document.getElementById（'canvas'）；
var ctxTrees=cnvTrees.getContext（'2d'）；
//绘制树木-从最右边算起第二个
ctxTrees.strokeStyle='green'；
ctxTrees.lineWidth='1'；
ctxTrees.beginPath（）；
ctxTrees.fillStyle='绿色'；
ctxTrees.moveTo（450200）；
ctxTrees.lineTo（485235）；
ctxTrees.lineTo（415235）；
ctxTrees.closePath（）；
ctxTrees.fill（）；
ctxTrees.stroke（）；
//绘制树木-从最右边算起第二个
ctxTrees.strokeStyle='green'；
ctxTrees.lineWidth='1'；
ctxTrees.beginPath（）；
ctxTrees.fillStyle='绿色'；
ctxTrees.moveTo（450225）；
ctxTrees.lineTo（505275）；
ctxTrees.lineTo（395275）；
ctxTrees.closePath（）；
ctxTrees.fill（）；
ctxTrees.stroke（）；
//绘制树木-从最右边算起第二个
ctxTrees.strokeStyle='green'；
ctxTrees.lineWidth='1'；
ctxTrees.beginPath（）；
ctxTrees.fillStyle='绿色'；
ctxTrees.moveTo（450260）；
ctxTrees.lineTo（530340）；
ctxTrees.lineTo（370340）；
ctxTrees.closePath（）；
ctxTrees.fill（）；
ctxTrees.stroke（）；
//绘制树木-小树-从最右边开始的第一棵树
ctxTrees.strokeStyle='green'；
ctxTrees.lineWidth='1'；
ctxTrees.beginPath（）；
ctxTrees.fillStyle='绿色'；
ctxTrees.moveTo（600250）；
ctxTrees.lineTo（610260）；
ctxTrees.lineTo（590260）；
ctxTrees.closePath（）；
ctxTrees.fill（）；
ctxTrees.stroke（）；
//绘制树-从最左边开始的第一个
ctxTrees.strokeStyle='green'；
ctxTrees.lineWidth='1'；
ctxTrees.beginPath（）；
ctxTrees.fillStyle='绿色'；
ctxTrees.moveTo（600255）；
ctxTrees.lineTo（620275）；
ctxTrees.lineTo（580275）；
ctxTrees.closePath（）；
ctxTrees.fill（）；
ctxTrees.stroke（）；
//绘制树木-小树-从最右边开始的第一棵树
ctxTrees.strokeStyle='green'；
ctxTrees.lineWidth='1'；
ctxTrees.beginPath（）；
ctxTrees.fillStyle='绿色'；
ctxTrees.moveTo（600265）；
ctxTrees.lineTo（635300）；
ctxTrees.lineTo（565300）；
ctxTrees.closePath（）；
ctxTrees.fill（）；
ctxTrees.stroke（）；
//绘制树木-小树-从最右边到第四
ctxTrees.strokeStyle='green'；
ctxTrees.lineWidth='1'；
ctxTrees.beginPath（）；
ctxTrees.fillStyle='绿色'；
ctxTrees.moveTo（600285）；
ctxTrees.lineTo（650335）；
ctxTrees.lineTo（550335）；
ctxTrees.closePath（）；
ctxTrees.fill（）；
ctxTrees.stroke（）；
}

将您的树绘图代码放入

坡度.加载功能中。

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

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

你画树

加载图像后，图像将绘制在树上

如果将树图形代码添加到图像的

onload

函数中，会发生什么情况：

您向服务器发出请求，并告诉计算机等待映像加载。当它加载时。。。

画一张图

画树

图像加载后，会发生以下情况：

图像被绘制出来

树被画在图像上

---

没问题，很乐意帮忙！