嘗試在畫布上動畫形狀，它顯示，但不移動

我試圖在畫布中使用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]位置的任務

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.

關於旋轉

旋轉你的形狀是一個簡單的兩個步驟：

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)。這將內部轉換矩陣設置爲其默認狀態（==完全未轉換）。

所以，你的旋轉過程變爲：

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)`

這裏的註釋代碼和演示：

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>

來源

2016-04-23 20:34:35 markE

嘗試在畫布上動畫形狀，它顯示，但不移動

回答

相關問題