如何在畫布上疊加圖像，然后在畫布上繪制？

Question

我已經完成了在單獨的.js文件中繪制畫布的所有代碼，所以現在我只需要將圖像放在上面。

我無法讓圖像工作，但是，正常的方法不起作用。 我試過這個：

var canvasvar;
var contextvar;
canvasvar = document.getElementById("canvas");
contextvar = canvas.getContext("2d");
var imageObj = new Image();
imageObj.src = "http://wannabevc.files.wordpress.com/2010/09/im-cool.jpg";
contextvar.drawImage(imageObj,10,10); 

首先，我應該將它放在html文件中，最后放在<script></script>中，還是應該把它放在帶有“繪制內容”代碼的js文件中？ 我無法工作，它運行沒有錯誤，但我沒有在畫布上看到任何圖像。 所以我仍然可以畫，但沒有圖像出現。 我猜這個圖像是在畫布下面的東西。

我猜這是因為我不只是制作一個畫布 - 我在其他js文件中發生了所有這些編程。

我也嘗試將此代碼放在我的.js代碼中的initCanvas函數中。 這是實際創建畫布的內容。 這是initCanvas函數的代碼：

// Retrieve canvas reference
canvas = document.getElementById("canvas");

// Size canvas
canvas.width  = 600;
canvas.height = 400;

// Retrieve context reference, used to execute canvas drawing commands
context = canvas.getContext('2d');
context.lineCap = "round";

// Set control panel defaults
document.getElementById("thickness").selectedIndex = 0;
document.getElementById("color").selectedIndex = 1;

// Overlay image over the canvas. THIS PART IS WHAT I'M ASKING ABOUT. This is usually
// not in the code

var canvasvar;
var contextvar;
canvasvar = document.getElementById("canvas");
contextvar = canvas.getContext("2d");
var imageObj = new Image();
imageObj.src = "http://wannabevc.files.wordpress.com/2010/09/im-cool.jpg";
contextvar.drawImage(imageObj,10,10); 

所以這段代碼的最后一部分就是我所說的。 但它沒有用。

Answer 1

使用imageObj.onload為您的映像加載時間

var canvasvar = document.getElementById("canvas");
var contextvar = canvas.getContext("2d");
var imageObj = new Image();
imageObj.onload=function(){
    contextvar.drawImage(imageObj,10,10);
}
imageObj.src = "http://wannabevc.files.wordpress.com/2010/09/im-cool.jpg";