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中的更改事件将是一个良好的开端。

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

从html输入值中绘制圆圈

2 个答案: