0

我想我快到了，但我可能是错的。我试图让分组的弧形扇区在一个方向上作为一个完整的圆圈进行动画处理。如何在 animateWheel 函数中引用 createWheel 函数？

这是代码：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Circle - Arc 3</title>
    <style>
        h1 {
            font-family:Arial, Helvetica, sans-serif;
            font-size: 1.5em;
            color:#333;
        }
        #canvas1{ background-color:#699;}
    </style>

  </head>

  <body>
    <h1>Circle - Arc</h1>
    <canvas id="canvas1" width="600" height="600"> Your Browser does not support HTML 5

    </canvas>


<script>
// arc sectors vars
var centerX = 200;
var centerY = 200;
var radius = 100;
var fullCircleDegree = 360;
// Closure Function to ceate dynamic arc sectors
var arcSectors = function(num) {    // The outer function defines a variable called "num"
var getNum = function() {
        return 360 / num;           // The inner function has access to the "num" variable of the outer function
        }
            return getNum;              // Return the inner function, thereby exposing it to outer scopes
        },
            createArcSectors = arcSectors(7);

var rotateAngle = createArcSectors() * Math.PI/180;
var startAngle = 0 * Math.PI/180;
var endAngle = createArcSectors() * Math.PI/180;
var animateRot = 0;

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


window.onload = function () {

    createWheel();
}

function createWheel() {
    var theCanvas = document.getElementById('canvas1');
    var context = theCanvas.getContext('2d'); 

    context.clearRect(0, 0, canvas1.width, canvas1.height);
    context.arc(centerX, centerY, radius, startAngle, endAngle, false);
    // create arc sectors   
    for (i = 0; i < 7; i++) {
        context.translate(centerX, centerY);        
        context.rotate(rotateAngle);
        context.translate(-centerX, -centerY);
        context.beginPath();
        context.moveTo(centerX, centerY);
        context.lineTo(centerX + radius, centerY);
        context.arc(centerX, centerY, radius, startAngle, endAngle, false);
        context.closePath();
        context.stroke();
        }

        animateWheel();
}

function animateWheel() {
    var theCanvas = document.getElementById('canvas1');
    var context = theCanvas.getContext('2d');

    //rotateAngle = animateRot * Math.PI / 180;     
    rotateAngle = .002; 
    console.log(rotateAngle);
    animateRot += .002;

    if (rotateAngle > 360) {
        animateRot -= 1;
    }

    requestAnimFrame(function() {
        animateWheel();
    });     
}

    </script>

  </body>
</html>
4

1 回答 1

1

requestAnimationFrame 设计模式如下所示：

function animate() {

    // request a new animation frame as soon as possible        

    requestAnimFrame(animate);

    // reset any values that need to change with every frame

    rotation+=PI2/120;

    // do the drawing

    drawWheel(cx,cy,rotation);

}

这是您的代码演示（稍微重构）：http: //jsfiddle.net/m1erickson/LydNg/ 

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
    $(function(){

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");

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


        var PI2=Math.PI*2;
        var cx=100;
        var cy=100;
        var radius=30;
        var rotation=-Math.PI/2;

        animate();

        function drawWheel(cx,cy,rotation){
            ctx.clearRect(0,0,canvas.width,canvas.height);
            ctx.save();
            ctx.translate(cx,cy);
            ctx.rotate(rotation);
            ctx.beginPath();
            ctx.arc(0,0,radius,0,PI2,false);
            ctx.closePath();
            for(var i=0;i<7;i++){
                var r=PI2/7*i;
                ctx.moveTo(0,0);
                ctx.lineTo(radius*Math.cos(r),radius*Math.sin(r));
            }
            ctx.stroke();
            ctx.restore();
        }

        var fps = 60;
        function animate() {
            setTimeout(function() {
                requestAnimFrame(animate);

                // Drawing code goes here
                rotation+=PI2/120;
                drawWheel(cx,cy,rotation);

            }, 1000 / fps);
        }

    }); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=350 height=350></canvas>
</body>
</html>
于 2013-11-13T00:26:20.480 回答