Question

我想我差不多了，但我错了。我试图让分组的弧形扇区在一个方向上作为整个圆圈进行动画处理。如何在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>

Answer 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>

HTML5画布动画 - 旋转分组弧扇区

1 个答案: