JavaScriptで更新するキャンバス描画を更新する

Question

JavaScript関数を使用してキャンバスに描画された円の半径を拡大しようとしています。

あり同様の問題を持つ多くの話題があったが、これを修正するだろう答えを見つけることができませんでした、私はsetInterval、setTimeoutのように提案されたビルトインメソッドを使用して試してみた、window.requestAnimationFrameと円を再描画するキャンバスをクリア更新された変数を使用します。

これまでのところ、setIntervalメソッドは更新を表示していましたが、以前の繰り返しをキャンバスに保持していましたが、クリアメソッドは機能しません。使用してコードを合理化し、すべてのonlickにキャンバスをリフレッシュするために、イベントハンドラを使用する方法があります、のsetIntervalを使用して

//Define globals 
 
var radiusIncrement = 5; 
 
var ballRadius = 20; 
 

 
//Helper functions 
 
function increaseRadius() { 
 
    ballRadius += radiusIncrement; 
 
} 
 

 
function decreaseRadius() { 
 
    if (ballRadius > 0) { 
 
    ballRadius -= radiusIncrement; 
 
    } 
 
} 
 

 

 
//Draw handler 
 
function draw() { 
 
    var canvas = document.getElementById('myCanvas'); 
 
    var ctx = canvas.getContext('2d'); 
 
    ctx.beginPath(); 
 
    ctx.arc(canvas.height/2,canvas.width/2,ballRadius,0,2*Math.PI); 
 
    ctx.stroke(); 
 
} 
 

 
//Event handler 
 
setInterval(function() { 
 
    draw(); 
 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
 
}, 100);

<!--Create frame and assign callbacks to event handlers--> 
 
<button type="button" onclick="increaseRadius()">Increase Radius</button> 
 
<button type="button" onclick="decreaseRadius()">Decrease Radius</button> 
 
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>

むしろより：ここ

は例ですか？

ありがとうございました。

乾杯。

Answer 1

私が正しく理解している場合は、ボタンのクリック、つまり半径の変更だけを再描画する必要があります。あなたは半径の変化が起こるたびに描画関数を呼び出すことができ、このために任意のタイミング機能を必要としない：

//Define globals 
var radiusIncrement = 5; 
var ballRadius = 20; 
var canvas = document.getElementById('myCanvas'); 
var ctx = canvas.getContext('2d'); 

//initialize 
draw(); 

//Helper functions 
function increaseRadius() { 
    ballRadius += radiusIncrement; 
    draw(); 
} 

function decreaseRadius() { 
    if (ballRadius > 0) { 
    ballRadius -= radiusIncrement; 
    draw(); 
    } 
} 


//Draw handler 
function draw() { 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    ctx.beginPath(); 
    ctx.arc(canvas.height/2,canvas.width/2,ballRadius,0,2*Math.PI); 
    ctx.stroke(); 
} 

あなたは私もドロー機能のうち、canvasとctxための変数定義を抽出見ることができるように、 drawコールごとにこれらを再割り当てする必要がないためです。