html5中canvas的getImageData执行无效问题
<!doctypehtml><html><head><metacharset="UTF-8"/><title>CanvasDragandDropTest</title><...
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas Drag and Drop Test</title>
</head>
<body>
<section>
<div>
<canvas id="canvas" width="400" height="300">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>
<script type="text/javascript">
window.onload=function(){
var c=document.getElementById("canvas");
var ctx= c.getContext("2d");
draw_widget(c,0,0);
var imgData=ctx.getImageData(0,0,400,300);////就是这两句，执行了却没有效果出来，当时在浏览器里debug一句一句执行是却是想要的结果，这是为什么？
ctx.putImageData(imgData,20,20)
}
function draw_widget(canvas,x,y){
var context = canvas.getContext("2d");
context.save();
var img = new Image();
img.src = "images/pc.png";
img.onload=function(){
context.drawImage(img, x, y);
}
}
</script>
</section>
</body>
</html> 展开
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas Drag and Drop Test</title>
</head>
<body>
<section>
<div>
<canvas id="canvas" width="400" height="300">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>
<script type="text/javascript">
window.onload=function(){
var c=document.getElementById("canvas");
var ctx= c.getContext("2d");
draw_widget(c,0,0);
var imgData=ctx.getImageData(0,0,400,300);////就是这两句，执行了却没有效果出来，当时在浏览器里debug一句一句执行是却是想要的结果，这是为什么？
ctx.putImageData(imgData,20,20)
}
function draw_widget(canvas,x,y){
var context = canvas.getContext("2d");
context.save();
var img = new Image();
img.src = "images/pc.png";
img.onload=function(){
context.drawImage(img, x, y);
}
}
</script>
</section>
</body>
</html> 展开
展开全部
在执行这一句的时候 图片还没有加载出来
把
var imgData=ctx.getImageData(0,0,400,300);
ctx.putImageData(imgData,20,20)
这两句 放到img.onload里面, 如下
img.onload=function(){
context.drawImage(img, x, y);
var imgData=ctx.getImageData(0,0,400,300);
ctx.putImageData(imgData,20,20)}
把
var imgData=ctx.getImageData(0,0,400,300);
ctx.putImageData(imgData,20,20)
这两句 放到img.onload里面, 如下
img.onload=function(){
context.drawImage(img, x, y);
var imgData=ctx.getImageData(0,0,400,300);
ctx.putImageData(imgData,20,20)}
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
