1

この小さなスクリプトが機能しないのはなぜですか?

<!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。

4

2 に答える 2

4

image.src は非同期なので、コールバックで描画する必要があります。 

var image = new Image;
image.onload = function() { context.drawImage(image, 10, 10, 400, 400); }
image.src = .....
于 2012-09-07T19:25:31.063 に答える