Почему моя анимация в холсте не отображается?

Я работаю над анимацией холста круга, который перемещается в случайном направлении, и каждую секунду направление меняется. Я делаю это, изменяя вектор скорости каждую секунду, повторно вызывая функцию, используя setInterval, изменяя положение центра круга и рисуя его другой функцией, используя requestAnimationFrame. Результат - пустой холст, и я не уверен, почему. Код разделен на следующие три файла:Почему моя анимация в холсте не отображается?

random_ball.html

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Random Ball</title> 
    <link rel="stylesheet" href="random_ball.css"> 
</head> 
<body> 
    <canvas id="canvas"></canvas> 
    <script src="random_ball.js"></script> 
</body> 
</html>

random_ball.css

html, body{ 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    overflow: hidden; 
    margin: 0; 
    padding: 0; 
} 
canvas{ 
    position: absolute; 
    width: 50vw; 
    height: 50vh; 
    top: 25vh; 
    left: 25vw; 
    border-style: solid; 
    margin: 0; 
    padding: 0; 
}

random_ball.js

const canvas = document.getElementById('canvas') 
const bounds = canvas.getBoundingClientRect() 
const TWO_PI = 2*Math.Pi 
const R = 25 
const MAX_Y = bounds.height - R 
const MAX_X = bounds.width - R 
const ctx = canvas.getContext('2d') 

function randomInterval(min, max){ 
    return Math.random()*(max - min) + min 
} 

function randomVelocity(){ // velocity is pixels/sec 
    VEL.X = randomInterval(-POS.X + R, MAX_X - POS.X) 
    VEL.Y = randomInterval(-POS.Y + R, MAX_Y - POS.Y) 
    console.log('VEL: ' + JSON.stringify(VEL)) 
} 

var POS = {X: bounds.height/2, Y: bounds.width/2} 
var VEL = {X: 0, Y: 0} 
var LAST_TIME = window.performance.now() 

function drawCircle(color){ 
    ctx.strokeStyle = color 
    ctx.beginPath() 
    ctx.moveTo(POS.X, POS.Y) 
    ctx.arc(POS.X, POS.Y, R, 0, TWO_PI, true) 
    ctx.stroke() 
} 

function draw(timestamp){ 
    var dt = (timestamp - LAST_TIME)/1000 
    var dx = VEL.X*dt 
    var dy = VEL.Y*dt 

    drawCircle('#FFFFFF') // erase the old drawing by making it white 
    POS.X += dx 
    POS.Y += dy 
    //console.log('POS: ' + JSON.stringify(POS)) 
    drawCircle('#000000') 
    LAST_TIME = timestamp 
    requestAnimationFrame(draw) 
} 

randomVelocity() 
drawCircle('#000000') 
setInterval(randomVelocity, 1000) //change velocity every second 
requestAnimationFrame(draw)

Я подозреваю, что рисование белого цвета над старым кругом означает, что изображение меняет слишком быстро, чтобы увидеть его.

источник

2016-01-18 Broseph

Есть ли что-нибудь в вашей консоли, которое вы можете поделиться с нами? – Marty

Нет, просто скорость и положение кажутся здоровыми. Сообщения об ошибках отсутствуют. – Broseph

Возможно, вам захочется ознакомиться с правилами синтаксиса JavaScript и, возможно, с помощью проверки кода, такого как JSHint.

Основная проблема с вашим кодом заключается в том, что вы ссылаетесь на несуществующее свойство объекта Math. Math не имеет Pi. Это написано PI (все колпачки). JavaScript is с учетом регистра эти вещи.

Далее: более распространенная практика для очистки холста - использовать ctx.clearRect(0, 0, width, height). Вот JSFiddle, чтобы помочь вам увидеть разницу: https://jsfiddle.net/Hatchet/dy2dognp/

источник

2016-01-18 01:14:27 Hatchet

О, я знал, что это чувствительный к регистру. Я только что видел код, который использовал Math.Pi, и предположил, что это правильно. Я изменил это, и теперь вижу чертежи, хотя он немного глючит. Я соглашусь с вашим ответом и выясню остальную часть своих ошибок самостоятельно. Спасибо за вашу помощь! – Broseph

@Broseph Рад помочь; счастливое кодирование! – Hatchet

Почему моя анимация в холсте не отображается?

ответ

Смежные вопросы