Javascript 为什么赢了'；除非html中有图像的实例，否则我的图像不会绘制到画布上吗？

我有一个canvas元素，context 2d，以及一个我希望能够在其中切换的图像源列表。目前，绘制的唯一图像是已经加载到html中的图像，其他图像根本没有绘制到画布，但是当I console.log时，图像将显示图像对象，但它仍然没有绘制。我之前还画了一个测试矩形，以确保画布正常工作，并且矩形画得很好。这是我的密码

Html:

卡片测试

Javascript（draw.js）：

const canvas=document.querySelector（“.canvas”）；
var imageObj=新图像（）；
const ctx=canvas.getContext（“2d”）；
常量图像=[
“/Users/Charlie 1/Desktop/Coding/Webpage Projects/TestWithCards/PNG/2C.PNG”，
“/Users/Charlie 1/Desktop/Coding/Webpage Projects/TestWithCards/PNG/3C.PNG”，
“/Users/Charlie 1/Desktop/Coding/Webpage Projects/TestWithCards/PNG/4C.PNG”，
“/Users/Charlie 1/Desktop/Coding/Webpage Projects/TestWithCards/PNG/5C.PNG”，
“/Users/Charlie 1/Desktop/Coding/Webpage Projects/TestWithCards/PNG/6C.PNG”，
“/Users/Charlie 1/Desktop/Coding/Webpage Projects/TestWithCards/PNG/7C.PNG”
];
window.onload=函数（）{
log（'test1'）；
imageObj.width=100；
imageObj.height=200；
imageObj.src=images[4]；//例如，只有images[1]会加载，因为我在html中加载了它
控制台日志（imageObj）；
ctx.drawImage（imageObj，50,50）；
log（'test2'）；
}

等待事件侦听器加载图像，然后再尝试在画布上绘制它

const图像=[
'https://picsum.photos/100/200?random=1',
'https://picsum.photos/100/200?random=2',
'https://picsum.photos/100/200?random=3',
'https://picsum.photos/100/200?random=4',
'https://picsum.photos/100/200?random=5',
];
var imageObj=新图像（）；
imageObj.width=100；
imageObj.height=200；
imageObj.src=图像[4]；
imageObj.addEventListener（“加载”，（）=>{
const canvas=document.querySelector（“.canvas”）；
const ctx=canvas.getContext（“2d”）；
ctx.drawImage（imageObj，50,50）；
});
画布{
背景色：#3e3e；
}
在javascript中，设置图像的src只会启动加载过程。该图像无法立即使用。加载图像后，尝试使用
onload
（请参阅）绘制图像。完美！成功了！非常感谢你。我刚刚使用了
imageObj.onload=function（）{ctx.drawImage（imageObj，50，50，100，200）；}
是的，这也行。乍一看文档，我认为这是不赞成的，但看起来它仍然受到支持。酷。