javascript - HTML入力値から円を描く

Question

これが私のコードです：

$(function () {
 drawCircle(150,150,100,'canvas');

 $('#radius').change(function(){
  $('#rVal').text($(this).val());
 });

 $('#x').change(function(){
  $('#xVal').text($(this).val());
 }); 

 $('#y').change(function(){
  $('#yVal').text($(this).val());
 });

});

http://jsfiddle.net/Z2EBh/ 範囲入力の値が変更されるたびに円を再描画する方法を知りたいです。

Answer 1

ここをチェックしてくださいhttp://jsfiddle.net/Z2EBh/2/

変更するたびに円を再描画する必要があります。それから、必ずクリアしてください。そうしないと、20 回ほど上書きされます。

$('#x').change(function () {
    $('#xVal').text($(this).val());
    xVal = $(this).val();
    drawCircle(xVal, yVal, rVal, 'canvas');
});

また、xVal、yVal、および rVal のグローバル変数も作成しました。したがって、各スライダーを追跡します。

補足: http://jsfiddle.net/Z2EBh/1/ これは偶然に作成されました。キャンバスをクリアしないと起こるかなりクールなイラスト

Answer 2

jquery の change イベントは良い出発点です。

http://api.jquery.com/change/