Question

我已经在我的页面上创建了画布，但是当我尝试在画布上导入图像时，它没有出现，这里是我使用的代码。（makeGameArea是我用来创建画布的方法）

var myGameArea = makeGameArea(700, 600, "myArea", "white");
var myContext = myGameArea.getContext("2d");

var myImage = new Image();
myImage.src = "sonic.gif";
myContext.drawImage(myImage, 100, 100, 100, 100);

我的代码中是否有语法错误？

Answer 1

我假设你已经在页面上有一个canvas元素，并且它的id为myArea。

你的第一行javascript没有意义 - 除非你有一个名为makeGameArea（）的函数，你还没有告诉过我们，你不能在那里创建一个画布。

其次，您必须先加载图像，然后才能在画布上绘制它。

尝试使用此代码：

var myGameArea = document.getElementById("myArea"); 
var myContext = myGameArea.getContext("2d");

myGameArea.width = 700;
myGameArea.height = 600;

var myImage = new Image();

myImage.onload = function() {

    myContext.drawImage(myImage, 100, 100, 100, 100);

}

myImage.src = "sonic.gif";

javascript：我无法在画布上绘制图像

1 个答案: