尝试在画布中为形状设置动画，它会显示，但不会移动答案

【问题标题】：Trying to animate shapes in canvas, it shows up, but doesn't move尝试在画布中为形状设置动画，它会显示，但不会移动
【发布时间】：2016-04-23 19:24:30
【问题描述】：

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

【问题讨论】：

标签： javascript animation canvas html5-canvas

【解决方案1】：

编码提示：将您的代码分成不同的职责。这种分离使您可以将编码重点集中在更简单的任务上。而且，一旦您正确运行了该任务，您就可以继续执行另一个任务，而不必担心之前的任务已损坏。

这是您的“旋转星星”项目的任务

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

...及其描述

drawShapes()在指定currentAngle的指定[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);
}

&lt;canvas width='700' height='700' id='animCanvas'&gt;&lt;/canvas&gt;    &lt;/body&gt;

【讨论】：