キャンバスで図形をアニメーションしようとすると、表示されますが移動しません。

キャンバスにlineToを使って作成したポリゴンをアニメーション化しようとしています。表示されますが、移動しません。私はオブジェクトのアプローチに従おうとしましたが、何もしないように見えました。キャンバスで図形をアニメーションしようとすると、表示されますが移動しません。

ヘルプ？

<!doctype html> 
    <html> 
     <head> 
      <style> 
      canvas { 
       border: 1px solid black; 
      } 
      </style> 
      <script> 
      "use strict"; 
      var canvas; 
      var ctx; 
      var timer; 
      var shapes; 
      var x; 
      var y; 
      function degreesToRadians(degrees) { 
        return (degrees*Math.PI)/180; 
       } 
    //to rotate stuff, not currently in use 
      function rotateStuff() { 
      roTimer = setInterval(ctx.rotate(degreesToRadians(60)),100); 
      } 
    //constructor for Shape object, not currently in use 
      function Shape() { 
      //this.x = canvas.width/2 + Math.random()*10-5; 
      //this.y = canvas.height/2 + Math.random()*10-5; 
      this.r = Math.random()*20-5; 
      this.vx = Math.random()*10-5; 
      this.vy = Math.random()*10-5; 
      var colors = ['red','green','orange','purple','blue','aqua','pink','gold']; 
      this.color = colors[Math.floor(Math.random()*colors.length)]; 
      } 
    //pushes the shapes to an array, not currently in use 
      function makeShapes() { 
       shapes = []; 
       for (var i = 0; i<2; i++){ 
        shapes.push(new Shape()); 
        } 
      } 
    //fills and resets background 
      function fillBackground() { 
      ctx.globalCompositeOperation = 'source-over'; 
       ctx.fillStyle = 'rgba(0,0,0,0.3)'; 
       ctx.fillRect(0,0,canvas.width,canvas.height); 
       ctx.globalCompositeOperation = 'lighter'; 
      } 
    //draws the shape 
      function drawShapes(r, p, m) { 
      //canvas, x position, y position, radius, number of points, fraction of radius for inset 
      fillBackground(); 
      x = 350; 
      y = 350; 
      r = Math.random()*20-5; 
       //for (var i = 0; i < shapes.length; i++) { 
        //var s = shapes[i]; 
        ctx.save(); 
        ctx.beginPath(); 
        ctx.translate(x, y); 
        ctx.moveTo(0,0-r); 
        //} 
       for (var i2 = 0; i2 < p; i2++) { 
        ctx.rotate(Math.PI/p); 
        ctx.lineTo(0, 0 - (r*m)); 
        ctx.rotate(Math.PI/p); 
        ctx.lineTo(0, 0 - r); 
       } 
       ctx.fillStyle = "yellow"; 
       ctx.fill(); 

       var vx = Math.random()*10-5; 
       var vy = Math.random()*10-5; 
       x += vx; 
       y += vy; 
       r -=8 
       ctx.restore(); 
      } 
      //} 
      window.onload = function() { 

        canvas = document.getElementById('animCanvas'); 
        ctx = canvas.getContext('2d'); 
        //makeShapes(); 
        //console.log(shapes); 
        timer = setInterval(drawShapes(40, 5, 0.5), 100); 
        //timer2 = setInterval(makeShapes, 4500); 

       } 
      </script> 
     </head> 
     <body> 
      <canvas width='700' height='700' id='animCanvas'></canvas> 
     </body> 
    </html>

出典

2016-04-23 Rebecca Claire A

コーディングのヒント：個別の業務にコードを区切ります。この分離により、コーディングの焦点をより単純なタスクに集中させることができます。そのタスクが正しく実行されたら、前のタスクが壊れてしまうことを心配することなく、別のタスクに移動することができます。あなたの

1. Draw a star and 
2. Rotate that star using animation.*

プロジェクト "星を回転させる" ...とその説明

drawShapes()が指定

で指定 [x,y]位置に1スターを描画するためにここで

はタスクです

animate()回というアニメーションループ：あなたの形状を回転

を回転について

Clears the canvas. 
    Fills the background. 
    Draws the star (or many stars) with `drawShapes`. 
    Changes the `currentAngle` rotation for the next loop. 
    Requests another animation loop.

は、単純な2段階のプロセスである：

1. Move to the shape's centerpoint: `.translate(centerX,centerY)' 2. Rotate the canvas to the currently desired angle: `rotate(currentAngle)`

translateとrotateが自動的に取り消されていないので、あなたがしなければなりませんあなたの変換の後で "クリーンアップ"。これを行う簡単な方法は、context.setTransform(1,0,0,1,0,0)です。これにより、内部変換行列がデフォルト状態（==完全に変換されていない状態）に設定されます。

だからあなたの回転処理は次のようになります。

var canvas; 
 
var ctx; 
 

 
canvas = document.getElementById('animCanvas'); 
 
ctx = canvas.getContext('2d'); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var shapes=[]; 
 
var star1={ x:50, y:100, r:40, currentAngle:0, p:5, m:.5, fill:'yellow',angleChange:Math.PI/60} 
 
var star2={ x:150, y:100, r:25, currentAngle:0, p:55, m:5, fill:'blue',angleChange:-Math.PI/360} 
 
var star3={ x:250, y:100, r:25, currentAngle:0, p:15, m:3, fill:'red',angleChange:Math.PI/120} 
 

 
requestAnimationFrame(animate); 
 

 
function drawShapes(star) { 
 
    ctx.save(); 
 
    // translate to the star's centerpoint 
 
    ctx.translate(star.x,star.y); 
 
    // rotate to the current angle 
 
    ctx.rotate(star.currentAngle) 
 
    // draw the star 
 
    ctx.beginPath(); 
 
    ctx.moveTo(0,0-star.r); 
 
    for (var i2 = 0; i2 < star.p; i2++) { 
 
     ctx.rotate(Math.PI/star.p); 
 
     ctx.lineTo(0, 0 - (star.r*star.m)); 
 
     ctx.rotate(Math.PI/star.p); 
 
     ctx.lineTo(0, 0 - star.r); 
 
    } 
 
    ctx.fillStyle =star.fill; 
 
    ctx.fill(); 
 
    ctx.restore(); 
 
} 
 

 
function fillBackground() { 
 
    ctx.globalCompositeOperation = 'source-over'; 
 
    ctx.fillStyle = 'rgba(0,0,0,0.3)'; 
 
    ctx.fillRect(0,0,canvas.width,canvas.height); 
 
    ctx.globalCompositeOperation = 'lighter'; 
 
} 
 

 
function animate(time){ 
 
    // clear the canvas 
 
    ctx.clearRect(0,0,cw,ch); 
 
    // fill the background 
 
    fillBackground(); 
 

 
    // draw the stars 
 
    // If you put star1,star2,star3 in a stars[] array then 
 
    //  you could simply the following demo code by looping 
 
    //  through the array 
 
    // 
 
    // draw the star1 
 
    drawShapes(star1); 
 
    // increase star1's current rotation angle 
 
    star1.currentAngle+=star1.angleChange; 
 
    // draw the star2 
 
    drawShapes(star2); 
 
    // increase star2's current rotation angle 
 
    star2.currentAngle+=star2.angleChange; 
 
    // draw the star3 
 
    drawShapes(star3); 
 
    // increase star3's current rotation angle 
 
    star3.currentAngle+=star2.angleChange; 
 
    // request another animation loop 
 
    requestAnimationFrame(animate); 
 
}

<canvas width='700' height='700' id='animCanvas'></canvas> </body>

：

1. Move to the shape's centerpoint: `.translate(centerX,centerY)' 
2. Rotate the canvas to the currently desired angle: `.rotate(currentAngle)` 
3. Reset the canvas: `.setTransform(1,0,0,1,0,0)`

ここで注釈付きコードとデモです

出典

2016-04-23 20:34:35 markE

キャンバスで図形をアニメーションしようとすると、表示されますが移動しません。

答えて

関連する問題