Нарисуйте круг из входных значений HTML

Question

Нарисуйте круг из входных значений HTML

0

Вот мой код:

$(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/ Я хотел бы знать, как я могу перерисовывать свой круг каждый раз, когда изменяется значение в диапазоне ввода.

Madbrush 11 нояб. 2013, в 22:41

Источник

Теги:

javascript

html

canvas

2 ответа

0

Событие изменения в jquery было бы хорошим началом.

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

almo 11 нояб. 2013, в 19:00

1

ОП уже использует изменения ...
Kierchon 11 нояб. 2013, в 21:16

Ещё вопросы

Kierchon · Accepted Answer · 2013-11-11T19-28-00.000Z

Посмотрите здесь 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/ Сделано это на случай аварии. Довольно крутые иллюстрации, которые случаются, если вы не очищаете полотно

Да, когда вы меняете радиус, это выглядит как винил. Спасибо за вашу помощь.