アニメーション機能で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

あなたは '関数anim'が宣言した'その間違った宣言が – prasanth

、あなたのクリックが 'animate'呼び出し、' jsのスクリプト 'アニメーション（0,0）にあなたの関数名を確認'' setTimeout'に古い（悪い練習）文字列引数を使って '' draw''を呼び出します... –

'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

アニメーション機能でsetTimeout（）が機能していません。アニメーションが機能しない

答えて

関連する問題