Fatal编程技术网
  • javascript/
  • Javascript drawImage（）不工作-Firebug显示：NS\u错误\u XPC\u错误\u转换\u JS

Javascript drawImage（）不工作-Firebug显示：NS\u错误\u XPC\u错误\u转换\u JS

javascript canvas

Javascript drawImage（）不工作-Firebug显示：NS\u错误\u XPC\u错误\u转换\u JS,javascript,canvas,drawimage,Javascript,Canvas,Drawimage,为什么这个小脚本不起作用 <!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/

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

<!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>
Chrome也不能显示图像，他们只是说
错误
图像。src是异步的，你需要用回调函数来绘制它


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



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


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



您需要做的只是更改：


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


致：


您需要做的只是更改：


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


致：


感谢它现在的工作，但是你能解释一下发生了什么吗？当你调用image.src=…，图像数据没有被加载，你知道它被加载并可用于绘图的唯一方法是使用onload回调函数。您所做的是在图像加载之前绘制，因此出现了一个错误，这要感谢它现在正在工作，但您能否解释一下发生了什么？调用image.src=…，图像数据不会加载，您知道它已加载且可用于绘制的唯一方法是使用onload回调函数。您所做的是在加载图像之前绘制，因此是一个错误