Javascript 如何按层将图像添加到画布？

这是我的代码：

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.beginPath（）；
ctx.arc（55,95,30,0,2*Math.PI）；
var ctx1=c.getContext（“2d”）；
ctx1.rect（0,0200300）；
ctx.clip（）；
ctx.stroke（）；
var canvas=document.getElementById（'myCanvas'），
context=canvas.getContext（'2d'）；
使_基（）；
函数make_base（）{
基本图像=新图像（）；
base_image.src=https://www.gravatar.com/avatar/4af2cdbaf02d97ba88d5d6daff94fbae/default=&s=80';
base_image.onload=函数（）{
背景图像（基础图像，15,55）；
}
}

画布{
边框：1px实心#000000；
位置：绝对位置；
顶部：66px；
左：22px；
}

---

您只需要创建第二个图像并相应地定位它。也只使用一个

上下文

，无需多次声明。修改了你的代码。我希望这将有助于您：

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.beginPath（）；
ctx.arc（55,95,30,0,2*Math.PI）；
ctx.rect（18150200250）；
ctx.clip（）；
ctx.stroke（）；
使_基（）；
函数make_base（）{
基本图像=新图像（）；
base_image.src=https://www.gravatar.com/avatar/4af2cdbaf02d97ba88d5d6daff94fbae/?default=&s=80';
base_image.onload=函数（）{
ctx.drawImage（基本图像，15,55）；
}
第二张图片=新图片（）；
second_image.src=https://www.gravatar.com/avatar/4af2cdbaf02d97ba88d5d6daff94fbae/?default=&s=80';
second_image.onload=函数（）{
ctx.drawImage（第二张图片，19151）；
}
}

---

为什么要调用

canvas.getContext（'2d'）

三次？只获取一次上下文，保存它并将其用于所有画布交互。