Canvas Animation - Stuck

Question

Я пытаюсь справиться с анимацией холста. Я наткнулся на отличный учебник по адресу http://www.kirupa.com/html5/creating_simple_html5_canvas_animation.htm (реквизит !!), но я пытаюсь сделать это немного дальше включением пользовательского взаимодействия в виде ввода, чтобы указать центр круга (я называю его «шириной») в приведенном ниже коде).

То, что я пробовал, находится ниже, и это работает в определенной степени. Вы увидите, что центр круга начинается с 175. Когда я вводил что-либо выше этого, круг перемещается вправо, как и в соответствии с моим кодом. Затем я могу ввести любое число меньше текущей точки, и оно будет двигаться влево, как и должно быть.

Однако !! После ввода первой цифры, будь то меньше или больше начальной точки, я затем пытаюсь ввести цифру, большую, чем текущая, и круг просто исчезает.

Я сбив с толку и объяснил, почему это происходит, и возможное решение ... если возможно.

Спасибо заранее, код у меня есть ...

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 

var requestAnimFrame = window.requestAnimationFrame || 
         window.mozRequestAnimationFrame || 
         window.webkitRequestAnimationFrame || 
         window.msRequestAnimationFrame; 

var start = 175; 
var startH = 250; 
var radius = 175; 

ctx.beginPath(); 

ctx.arc(start, startH, radius, 0, Math.PI * 2, false); 
ctx.closePath(); 

ctx.fillStyle = "#006699"; 
ctx.fill(); 

function drawCircle() { 
    var width = document.getElementById("width").value; 

    if(start == width) { 
     start = width;   

    } else { 
     ctx.clearRect(0, 0, canvas.height, canvas.width); 

     ctx.beginPath(); 

     ctx.arc(start, startH, radius, 0, Math.PI * 2, false); 
     ctx.closePath(); 

     ctx.fillStyle = "#006699"; 
     ctx.fill(); 

     if(start < width) { 
      start += 1; 
     } else { 
      start -= 1; 
     } 

     requestAnimFrame(drawCircle); 

    } 

} 

Answer 1

Решение: преобразовать строку в число:

var width = Number(document.getElementById("width").value); 

---

Объяснение: давайте рассмотрим в коде:

значение входного всегда будет строку:

width = document.getElementById("width").value; 

Этот оператор равенства не принимает во внимание тип: 60 == '60' так же верно, как 60 == 60:

start == width 

Только === примет вид во внимание также. Далее, оператор < неявно преобразует любую строку в число при сравнении чисел с числами как строки: '60' < 62 верно, '60' < 58 ложна:

start < width 

Далее, мы получили задание, которое добавляет (или вычитает) 1 - start. Это не проблема, пока start является номер:

start += 1 

И в какой-то момент start == width станет правдой, а затем эта ужасная вещь:

start = width 

Отныне start является строка, т.к. так и есть width. == все равно будет работать, < все равно будет работать, но ...

start += 1 

Это попытка добавить строку и число.Поскольку результат JavaScript такой операции всегда строка, то вместо этого неявно преобразует число в строку и таким образом выполняет строку конкатенация: '60' + 1 === '601'. Повторите это несколько раз, и вы получите '6011111111111111111111111111111' и так далее.

Чтобы предотвратить это, обратитесь к решению в верхней части этого ответа: сначала преобразуйте строку в число.