显示一个画布到另一个

我有一个问题显示一个画布到另一个。我根据this solution 显示一个画布到另一个

<script> 
    var source = document.getElementById('hiddenCanvas'); 
    var source_ctx = source.getContext('2d'); 
    var img = new Image(); 
    img.onload = function(){ 
     source.width = img.width; 
     source.height = img.height; 
     source_ctx.drawImage(img, 0, 0, img.width, img.height); 
     } 
    img.src = 'icon.jpg'; 
    var destination = document.getElementById('visibleCanvas'); 
    var destin_ctx = destination.getContext('2d'); 
    destin_ctx.drawImage(source, 0, 0); 
</script>

好做的一切，第一canvas元素显示画面正常，但无论我做什么，第二画布不希望显示图片。

来源

2013-07-26 Maxim Ershov

<script> 
function init() 
{ 
    var source = document.getElementById('hiddenCanvas'); 
    var source_ctx = source.getContext('2d'); 

    var destination = document.getElementById('visibleCanvas'); 
    var destin_ctx = destination.getContext('2d'); 

    var img = new Image(); 
    img.onload = function(){ 
     source.width = img.width; 
     source.height = img.height; 
     source_ctx.drawImage(img, 0, 0, img.width, img.height); 

     destin_ctx.drawImage(source, 0, 0); 
    } 
    img.src = 'arun.jpg'; 
} 
</script> 
</head> 
<body onload="init();"> 
<canvas id="hiddenCanvas" /> 
<canvas id="visibleCanvas" />

您的代码不工作，因为你正在尝试之前它被加载到DOM

来源

2013-07-26 03:22:03

您正试图在图像加载之前从源头绘制图像，并且图像来源甚至包含该图像。

移动onload处理程序中的最后一个绘制操作。还记得设置大小目的地帆布：

var source = document.getElementById('hiddenCanvas'); 
var source_ctx = source.getContext('2d'); 

var destination = document.getElementById('visibleCanvas'); 
var destin_ctx = destination.getContext('2d'); 

var img = new Image(); 
img.onload = function(){ 
    source.width = img.width; 
    source.height = img.height; 
    source_ctx.drawImage(img, 0, 0, img.width, img.height); 

    destination.width = source.width; 
    destination.height = source.height; 
    destin_ctx.drawImage(source, 0, 0); 
} 
img.src = 'icon.jpg';

来源

2013-07-26 03:10:21 K3N

已经试过了，还是没有结果 –

@MaximErshov发现了另一个可能的错误，请参阅更新。您还需要设置目标画布大小（至少不清楚这是否完成）。 – K3N

目前你已经构成的方式来访问canvas元素代码img.onload在之后执行destin_ctx.drawImage行。这意味着，你的程序流程目前看起来是这样的：

图片被告知要开始加载

目标画布使用绘制（目前为空白）来源帆布

图片加载完成

图像的onload执行，导致源画布被绘制到。目标画布不会更新，因为destin_ctx.drawImage操作是一次性副本。

你需要做的是将destin_ctw.drawImage调用移动到执行流程中的一个地方，在那里你知道源画布肯定会包含适当的内容。在这种简单的情况下，将它移动到图像的onload内部就行了。

这里有一个完整的（但简单）的HTML文件，在铬对我的作品，以改变图像的URL：

<script> function load() { var source = document.getElementById('hiddenCanvas'); var source_ctx = source.getContext('2d'); var destination = document.getElementById('visibleCanvas'); var destin_ctx = destination.getContext('2d'); var img = new Image(); img.onload = function(){ source.width = img.width; source.height = img.height; source_ctx.drawImage(img, 0, 0, img.width, img.height); destin_ctx.drawImage(source, 0, 0); } img.src = 'ship360_32.png'; } </script> <body onload="load()"> <canvas id="hiddenCanvas"></canvas> <canvas id="visibleCanvas"></canvas> </body>

来源

2013-07-26 03:26:36

显示一个画布到另一个

回答

相关问题