HTML5 画布动画 - 旋转分组的弧形扇区答案

【问题标题】：HTML5 Canvas Animation - Rotate Grouped Arc SectorsHTML5 画布动画 - 旋转分组的弧形扇区
【发布时间】：2013-11-25 06:49:37
【问题描述】：

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

【问题讨论】：

标签： html5-canvas

【解决方案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>

【讨论】：

感谢您的帮助！我的代码具有误导性，我理解您为什么按照您的方式制造轮子。你把我推向了正确的方向。我的意图是将这个“轮子”用作旋转菜单。感谢您的帮助，这是一个带有基本 requestAnimFrame 的小提琴。 jsfiddle.net/cs_what/tK443