尝试在画布上动画形状，它显示，但不移动

我试图在画布中使用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

尝试在画布上动画形状，它显示，但不移动

回答

相关问题