javascript：我無法在畫布上繪制圖像

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";