HTML5 Canvas - 添加更多圆圈以圆周运动旋转答案

【问题标题】：HTML5 Canvas - Adding more circles rotate in circular motionHTML5 Canvas - 添加更多圆圈以圆周运动旋转
【发布时间】：2013-12-30 06:26:13
【问题描述】：

我正在尝试使用 HTML5 画布在圆形循环中添加更多圆圈，但它似乎不起作用。我希望其他圆圈能够跟踪圆圈已经在那里旋转。我也想知道如何使圆周运动非线性（也就是说，它以不同的速度移动，就像它有缓动一样）。

你们能帮忙吗？：/谢谢堆。下面是我的代码。

<canvas id="canvas" width="450" height="450"></canvas>


            <script type="text/javascript">

        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var w = canvas.width;
        var h = canvas.height;
        var dd = 4;
        var angle = 0;
        /*var cx = 197;

        var cy = 199;
        var radius = 200;*/
        var cx = w/2;

        var cy = h/2;
        var radius = 200;



        function draw(x, y) {
            ctx.fillStyle = "rgb(38,161,220)";
            ctx.strokeStyle = "rgb(38,161,220)";
            ctx.clearRect(0, 0, w, h);
            ctx.save();
            ctx.beginPath();
            ctx.beginPath();
            //ctx.rect(x - 30 / 2, y - 30 / 2, 50, 30);

            // Circle 1
            ctx.arc(x-1/2, y-1/2, 10, 0, 2 * Math.PI, false);
            ctx.fill();
            ctx.stroke();


            ctx.restore();
        };



            /**  context.beginPath();

              context.fillStyle = 'green';
              context.fill();
              context.lineWidth = 5;
              context.strokeStyle = '#003300';
              context.stroke(); **/


        var fps = 120;

        window.requestAnimFrame = (function (callback) {
            return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
                window.setTimeout(callback, 1000 / fps);
            };
        })();


        function animate() {
            setTimeout(function () {
                requestAnimFrame(animate);

                // increase the angle of rotation
                //angle += Math.acos(1-Math.pow(dd/radius,2)/2);

                angle += Math.acos(1-Math.pow(dd/radius,2)/2);


                // calculate the new ball.x / ball.y
                var newX = cx + radius * Math.cos(angle);
                var newY = cy + radius * Math.sin(angle);
                // draw
                draw(newX, newY);


                // draw the centerpoint 
                ctx.beginPath();
                ctx.arc(cx, cy, radius, 0, Math.PI * 2, false);
                ctx.closePath();
                ctx.stroke();


            }, 1000 / fps );
        }
        animate();

        </script>

【问题讨论】：

标签： javascript html canvas rotation geometry

【解决方案1】：

在哪里和哪里之间缓和？

这里有一些非线性角速度：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<canvas id="canvas" width="450" height="450"></canvas>


            <script type="text/javascript">

        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        var w = canvas.width;
        var h = canvas.height;
        var dd = 4;
        var angle = 0;
        var cx = w/2;
        var t = 0;
        var velocity = 0.01;
        var cy = h/2;
        var radius = 200;



        function draw(x, y) {

            ctx.fillStyle = "rgb(38,161,220)";
            ctx.strokeStyle = "rgb(38,161,220)";
            ctx.clearRect(0, 0, w, h);
            ctx.save();
            ctx.beginPath();
            ctx.beginPath();
            ctx.arc(x-1/2, y-1/2, 10, 0, 2 * Math.PI, false);
            ctx.fill();
            ctx.stroke();
            ctx.restore();

        };

        var fps = 120;

        window.requestAnimFrame = (function (callback) {
            return window.requestAnimationFrame || window.webkitRequestAnimationFrame ||                                  window.mozRequestAnimationFrame || window.oRequestAnimationFrame ||  window.msRequestAnimationFrame || function (callback) {
                window.setTimeout(callback, 1000 / fps);
            };
        })();


        function animate() {
            setTimeout(function () {

                // increase the angle of rotation

                angle += velocity;

                //sinusoidal velocity

                velocity += 0.005 * (Math.sin(t));
                t += 0.1;

                 // randomzed velocity:

                //velocity += 0.001 * (Math.random() - 1);


                // draw
                // calculate the new ball.x / ball.y
                var newX = cx + radius * Math.cos(angle);
                var newY = cy + radius * Math.sin(angle);


                draw(newX, newY);


                // draw the centerpoint
                ctx.beginPath();
                ctx.arc(cx, cy, radius, 0, Math.PI * 2, false);
                ctx.closePath();
                ctx.stroke();

                requestAnimFrame(animate);


            }, 1000 / fps );
        }
        animate();

        </script>
</body>
</html>

你可以像这样制作一个圆形类：

var Circle = function(radius,velocity,etc){
    this.radius = radius
    this.velocity = velocity
    this.etc = etc

    // and whatever other properties you think you need

}

然后

var circleArray = []

for(var i = 0; i < circleCount; i++){
    circleArray.push(new Circle(2,0.1,"some_property"))    
}

然后在 animate() 内部：

circleArray.forEach(function(circle){

    //drawing code

})

在你问一个更具体的问题之前，我只能给你这些

【讨论】：

谢谢！可变圆周运动非常有用！尽管如此，仍然没有设法添加更多的圆圈来围绕圆圈旋转。 ://
你只需要重复你正在为一个圆圈做的事情以及你想要绘制多少个不同圆圈的参数
我想我解决了。谢谢您的帮助！ :) techconclave.com/test.html