Question

我有这个简单的代码用于在画布中绘制图像，但它仅适用于Firefox

这是代码：

<!DOCTYPE html>
<html>
<head>
<title>CANVAS</title>
</head>
<body>
<canvas id="smallImage" width="600" height="600"></canvas>
<script>
var imgid = document.getElementById('smallImage');
var ctx = imgid.getContext('2d');
var img = new Image();
var immmagine = "flowers.jpg";
img.src = immmagine;
ctx.drawImage(img,0,0);
</script>
</body>
</html>

Answer 1

您需要使用onload事件。

img.onload = function() {
   ctx.drawImage(img,0,0);
}

Answer 2

您需要在图片上收听onload事件：

var imgid = document.getElementById('smallImage');
var ctx = imgid.getContext('2d'); 
var img = new Image();
var immmagine = "flowers.jpg";
img.src = immmagine;
img.onload = function ()
{
 ctx.drawImage(img,0,0);
}

画布图像绘制在所有浏览器中都不起作用

2 个答案: