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/