检查此javascript以创建meme

下面是我编写的HTML代码。实际上，问题是当我调用函数get（）onclick时，我的浏览器中没有出现任何更改。但是，单击submit按钮上的多次后，显示外观的即时变化，这是我想要的，但持续时间非常短（例如0.1秒）

var t=“此处的顶部文本”；
var b=“底部文本”；
变量i=”https://images.pexels.com/photos/1385326/pexels-photo-1385326.jpeg";
控制台日志（t，b，i）；
memecavas（）；
函数get（）{
t=document.getElementById（“topText”）.value；
b=document.getElementById（“botText”）.value；
i=document.getElementById（“imgLink”）.value；
控制台日志（t，b，i）；
memecavas（）；
}
函数memeCanvas（）{
var c=document.querySelector（“#c”）；
var ctx=c.getContext（“2d”）；
var image=新图像（）；
image.onload=函数（）{
console.log（“图像加载”）；
ctx.drawImage（图像，0，0，400，400）；
ctx.fillStyle=“白色”；
ctx.fillRect（0,0400,50）；
ctx.fillRect（0350400,50）；
ctx.strokeText（t，10，10）；
ctx.strokeStyle=“黑色”；
ctx.strokeRect（0,0400,50）；
ctx.strokeRect（0350400,50）；
ctx.strokeText（b，0370）；
}
image.src=i；
}

canvas{}

将您的

更改为可以解决问题的

另外，请确保您在

imgLink

上有一个有效的图像。对于此示例，我更改了值，以便您可以看到它的实际效果

var t=“此处的顶部文本”；
var b=“底部文本”；
变量i=”https://images.pexels.com/photos/1385326/pexels-photo-1385326.jpeg";
var c=document.querySelector（“#c”）；
var ctx=c.getContext（“2d”）；
memecavas（）；
函数get（）{
t=document.getElementById（“topText”）.value；
b=document.getElementById（“botText”）.value；
i=document.getElementById（“imgLink”）.value；
memecavas（）；
}
函数memeCanvas（）{
var image=新图像（）；
image.onload=函数（）{
ctx.drawImage（图像，0，0，400，400）；
ctx.fillStyle=“白色”；
ctx.fillRect（0,0400,50）；
ctx.fillRect（0350400,50）；
ctx.strokeText（t，10，10）；
ctx.strokeStyle=“黑色”；
ctx.strokeRect（0,0400,50）；
ctx.strokeRect（0350400,50）；
ctx.strokeText（b，0370）；
}
image.src=i；
}

---

谢谢，它很有效。但请您告诉我为什么它与一起工作，而不是与.：-）