0

あるキャンバスを別のキャンバスに表示する際に問題があります。私はこの解決策に従ってすべてを行います 

<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>

さて、最初のキャンバス要素は画像を正しく表示しますが、私が何をしても、2番目のキャンバスは画像を表示したくありません。

4

3 に答える 3

0 
<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 にロードされる前に canvas 要素にアクセスしようとしているため、コードが機能していません

于 2013-07-26T03:22:03.810 に答える
0

画像が読み込まれる前にソースから画像を描画しようとしており、ソースにも画像があります。

最後の描画操作を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-26T03:10:21.073 に答える