在画布上，使用png的drawImage和使用笔画创建图形之间的区别？
在画布上，使用png的drawImage和使用笔画创建图形之间的区别？
提问于 2011-12-22 15:03:47
为什么在画布中处理事物的方式会有所不同？例如，如果我将png放在画布上，而不是在画布上画一条线。当我将该画布的内容复制到另一个画布时，只有该行被复制过来。
var thecanvas = document.getElementById('mycanvas');
var context = thecanvas.getContext('2d');
// put a png on the canvas
var img = new Image();
img.onload = function(){ context.drawImage(img,0,0); };
img.src = 'images/test.png';
// draw a line on the canvas
context.moveTo(100, 150); context.lineTo(450, 50); context.stroke();
final_image = thecanvas.toDataURL("image/png");
copyimg = new Image();
copyimg.src = final_image;
var newcanvas = document.getElementById('newCanvas');
var newcanvascontext = newcanvas.getContext('2d');
// why is only the line I drew copied over and not the png image???
newcanvascontext.drawImage(copyimg,0,0,397,397);回答 1
Stack Overflow用户
回答已采纳
发布于 2011-12-22 15:58:27
请注意镜像加载事件。在加载图像之前复制画布。你必须这样做
var thecanvas = document.getElementById('mycanvas');
var context = thecanvas.getContext('2d');
// put a png on the canvas
var img = new Image();
img.onload = function(){
context.drawImage(img,0,0);
var newcanvas = document.getElementById('newCanvas');
var newcanvascontext = newcanvas.getContext('2d');
newcanvascontext.drawImage(thecanvas,0 ,0);
};
img.src = 'http://www.mygreatiphone.com/wp-content/uploads/2011/11/google.png';
// draw a line on the canvas
context.moveTo(100, 150); context.lineTo(450, 50); context.stroke();查看演示：http://jsfiddle.net/diode/3NHXy/5/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8600438
复制相关文章
相似问题
腾讯云开发者
