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文件中发生了所有这些编程。

我还尝试将此代码放在initCanvas代码中的.js函数中。这是实际创建画布的内容。以下是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";

如何在画布上叠加图像，然后在画布上绘制？

1 个答案: