从 html 输入值绘制圆圈

Draw circle from html input values

本文关键字：绘制 html 输入      更新时间：2023-09-26

这是我的代码： 

$(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/我想知道每次更改范围输入中的值时如何重新绘制我的圆圈。

在这里查看 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/偶然做出的。如果你不清除画布，就会发生的非常酷的插图

jquery 中的更改事件将是一个好的开始。

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

相关文章：