Question

我正在尝试使用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>

Answer 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

})

直到你问一个更具体的问题，这就是我能给你的全部

HTML5画布 - 添加更多圆圈以圆周运动旋转

1 个答案: