Question

为什么这个小脚本不起作用？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<canvas id="can" height="500" width="500"></canvas>

<script type="text/javascript">

    var image = new Image().src="1.jpg";

    context = document.getElementById("can").getContext("2d");

    context.drawImage(image,10,10,480,480);

</script>

</body>
</html>

Firefox中的Firebug（最新版本）显示：

NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMCanvasRenderingContext2D.drawImage]
[Bei diesem Fehler anhalten]    

context.drawImage(image,10,10,480,480);

Chrome无法显示图片，他们只是说ERROR。

Answer 1

image.src是异步的，你需要用回调来绘制它。

var image = new Image;
image.onload = function() { context.drawImage(image, 10, 10, 400, 400); }
image.src = .....

Answer 2

您需要做的就是改变：

   ctx.drawImage(i, 0, 0, arg.width, arg.height);

为：

   ctx.drawImage(arg.img, 0, 0, arg.width, arg.height);

drawImage（）无效 - Firebug显示：NS_ERROR_XPC_BAD_CONVERT_JS

2 个答案: