setTimeout（）在動畫函數|中不起作用動畫不能正常工作

我正在嘗試構建一個非常簡單的動畫功能。我使用本教程來構建我的項目：setTimeout（）在動畫函數|中不起作用動畫不能正常工作

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來做動畫和做其他事情。

首先script標籤，什麼是錯的

// 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

setTimeout（）在動畫函數|中不起作用動畫不能正常工作

回答

相關問題