顯示一個畫布到另一個

我有一個問題顯示一個畫布到另一個。我根據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

顯示一個畫布到另一個

回答

相關問題