комплектTimeout() не работает в функции анимации

Я пытаюсь создать очень простую анимационную функцию. Я использую этот учебник, чтобы создать свой проект:комплектTimeout() не работает в функции анимации | Анимация не работает

https://www.youtube.com/watch?v=hUCT4b4wa-8

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

Вот моя скрипка: https://jsfiddle.net/xkhpmrtu/7/

А вот отрывок из моего кода:

<!DOCTYPE html>

<head> 

    <meta charset="utf-8" /> 

    <style type="text/css"> 

     canvas { 
      border: 1px solid #666; 
     } 

    </style> 

    <script type="application/javascript" language="javascript"> 
     function anim(x,y) { 
      var canvas = document.getElementById('canvas');//reference to canvas element on page 
      var ctx = canvas.getContext('2d');//establish a 2d context for the canvas element 
      ctx.save();//save canvas state if required (not required for the tutoriral anaimation, but doesn't hurt the script so it stays for now) 
      ctx.clearRect(0, 0, 550, 400);//clears the canvas for redrawing the scene. 
      ctx.fillStyle = "rgba(0,200,0,1)";//coloring the rectangle 
      ctx.fillRect = (x, 20, 50, 50);//drawing the rectangle 
      ctx.restore();//this restores the canvas to it's original state when we saved it on (at the time) line 18 
      x += 5; //increment the x position by some numeric value 
      var loopTimer = setTimeout('draw('+x+','+y+')', 2000);// setTimeout is a function that 
    </script> 

</head> 

<body> 

    <button onclick="animate(0,0)">Draw</button> 

    <canvas id="canvas" width="550" height="400"></canvas> 

</body>

Любая идея, что я делаю неправильно?

источник

2017-01-22 kenef

проверить имя функции в JS скрипт 'аним (0,0)' его неправильное заявление – prasanth

вы имеете 'функцию anim' объявил, ваш клик вызывает' animate' и ' Функция anim' вызывает 'draw', используя аргумент строки устаревшей (плохой практики) для' setTimeout' ... –

также, 'ctx.fillRect' - это функция, но вы назначаете ей значение' (x, 20, 50 , 50) '- это не то, как вызываются функции, вы хотите' ctx.fillRect (x, 20, 50, 50); '- все исправления применяются, вы получаете https://jsfiddle.net/xkhpmrtu/9/ –

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

Первый сценарий тег, а что случилось с ним

// type and language default to the correct setting for javascrip 
// <script type="application/javascript" language="javascript"> 
<script> 

    function anim(x,y) { 
     // get the canvas once. Getting the canvas for each frame of an 
     // animation will slow everything down. Same for ctx though will not 
     // create as much of a slowdown it is not needed for each frame 
     // var canvas = document.getElementById('canvas'); 
     // var ctx = canvas.getContext('2d'); 
     // Dont use save unless you have to. It is not ok to add it if not needed 
     // ctx.save(); 
     // dont use literal values, canvas may change size 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     ctx.fillStyle = "rgba(0,200,0,1)"; 
     // this line is wrong should be ctx.fillRect(x, 20, 50, 50). It is correct in the video    
     ctx.fillRect = (x, 20, 50, 50);//drawing the rectangle 
     // restore not needed 
     //ctx.restore(); 

     x += 5; //increment the x position by some numeric value 
     // creating a string for a timer is bad. It invokes the parser and is slooowwwwww... 
     // For animations you should avoid setTimeout altogether and use 
     // requestAnimationFrame 
     // var loopTimer = setTimeout('draw('+x+','+y+')', 2000); 
     requestAnimationFrame(draw); 
    // you were missing the closing curly. 
    } 
</script>

Существует много более неправильно с Тута. Это может быть оправдано из-за того, что ему около 5 лет. Вы должны искать более подробные учебники, поскольку 5 лет навсегда в компьютерной технике.

Вот как это сделать правильно.

// This script should be at the bottom of the page just befor the closing body tag 
 
// If not you need to use the onload event to start the script. 
 

 

 
// define a function that starts the animation 
 
function startAnimation() { 
 
    animating = true; // flag we are now animating 
 
    x = 10; 
 
    y = 10; 
 
    // animation will start at next frame or restart at next frame if already running 
 
} 
 
    // define the animation function 
 

 
function anim() { 
 
    if (animating) { // only draw if animating 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    ctx.fillStyle = "red"; //coloring the rectangle 
 
    ctx.fillRect(x, y, 50, 50); //drawing the rectangle 
 
    x += xSpeed; 
 

 
    } 
 
    // set animation timer for next frame 
 
    requestAnimationFrame(anim); 
 
} 
 

 

 
// add a click listener to the start button. It calls the supplied function every time you click the button 
 
startAnimButton.addEventListener("click", startAnimation); 
 

 
const ctx = canvas.getContext('2d'); // get the 2d rendering context 
 

 
// set up global variables to do the animation 
 
var x, y, animating; 
 
animating = false; // flag we are not animating 
 

 
const xSpeed = 50/60; // Speed is 50 pixels per second at 60fps 
 
         // dont slow the animation down via frame rate 
 
         // slow it down by reducing speed. 
 
         // You only slow frame rate if the machine 
 
         // can not handle the load. 
 

 
// start the animation loop 
 
requestAnimationFrame(anim);

canvas { 
 
    border: 1px solid #666; 
 
}

<!-- don't add events inline --> 
 
<button id="startAnimButton">Draw</button> 
 
<canvas id="canvas" width="512" height="128"></canvas>

источник

2017-01-22 09:05:14 Blindman67

Спасибо за вход! Извините, мне так долго нужно было вернуться к этому. Вы помогли мне, и теперь у меня работает мой проект. Еще раз спасибо. – kenef

комплектTimeout() не работает в функции анимации | Анимация не работает

ответ

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