0

ボタンを押し続けると、画像がちらつきます。に問題がある可能性がありますctx.clearRect(0,0,100,500)。どうすれば問題を解決できますか?

HTML 5 キャンバスでアニメーション化しようとしています。キャンバスに移動オブジェクトが必要で、ボタンを押すと、他の移動オブジェクトはちらつきなしで前に続きます。

function draw(x,y){
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d");
    ctx.save();
    ctx.clearRect(0,0,100,500); // This may be the problem
    var img=document.getElementById("Image");
    ctx.drawImage(img,50,y);
    ctx.restore();
    y -= 10;
    var loopTimer = setTimeout('draw('+x+','+y+')',50);
}

HTML5

<button onclick="draw(0,500)">Draw</button>
<canvas id="canvas" width="600" height="500">
</canvas>
4

2 に答える 2

0

ボタンを複数回押すと、画像がちらつきます。これは、setTimeout() を複数回開始することを意味します。すでに押されているかどうかを確認する変数を追加します。

于 2013-05-12T18:54:31.107 に答える
0

全体をクリアしていないために問題が発生しているようですcanvas。これを試して：

function draw(x,y){
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d");
    ctx.save();
    ctx.clearRect(0,0, canvas.width, canvas.height);
    var img=document.getElementById("Image");
    ctx.drawImage(img,50,y);
    ctx.restore();
    y -= 10;
    var loopTimer = setTimeout('draw('+x+','+y+')',50);
}

デモ

于 2012-08-26T07:53:44.533 に答える