JavaScript中的图像显示

我试图用JavaScript在画布中显示剪贴画图像，由于某种原因，剪贴画没有出现在我绘制的矩形顶部作为边框，我不知道如何使它们都出现。显示的是矩形，而不是图片。不允许我把两者都放在画布上吗？我需要叠两层画布吗？我只是编错了吗？任何帮助都将不胜感激

<canvas id = "myCanvas" width = "400" height="400"></canvas>
<script>
var r = document.getElementById("myCanvas");
var rec = r.getContext("2d");
rec.strokeStyle = "black";
rec.rect(20,20,300,300);
var img = new Image();
img.onload = function()
{
    rec.drawImage(img,30,30);
}
img.src = "monkey-face-cartoon.png";
rec.stroke();
function monkeyMove(){
}
</script>

var r=document.getElementById（“myCanvas”）；
var rec=r.getContext（“2d”）；
rec.strokeStyle=“黑色”；
rec.rect（20,20300300）；
var img=新图像（）；
img.onload=函数（）
{
记录绘图图像（img，30,30）；
}
img.src=“monkey face cartoon.png”；
记录笔划（）；
函数monkeyMove（）{
}

看起来图像没有正确加载，因此没有调用

img.onload

。我将src替换为一个数据uri，它呈现得很好。你从哪里获得图像？

图像来自我的个人电脑，保存到我的桌面，我只是没有把目录放上去。什么是数据uri？数据uri是一种编码形式，在本例中，将图像编码为字符串。检查哪个有您的代码，但显示堆栈溢出徽标。数据URI是以

data:image/png开头的部分；base64

。您可以阅读有关它们的更多信息以及为映像提供服务—要从文件系统中为资产提供服务，需要从服务器而不是从

文件：//~Desktop/index.html

中为它们提供服务。如果您有python，最简单的方法就是运行

python-msimplehttpserver

（更多信息）。这应该与

index.html

文件和

monkey face cartoon

文件在同一目录下运行。该文件根本不起作用，它只是试图显示uri代码，然后没有显示图像。代码笔？您使用的是哪种浏览器？它应该适用于任何现代浏览器