Html5 canvas HTML5画布动画-旋转分组圆弧扇区_Html5 Canvas

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

html5-canvas

Html5 canvas HTML5画布动画-旋转分组圆弧扇区,html5-canvas,Html5 Canvas,我想我就快到了，但我可能错了。我试图让分组的圆弧扇区在一个方向上作为一个完整的圆来设置动画。如何在animateWheel函数中引用createWheel函数 <style> body{ background-color: ivory; } canvas{border:1px solid red;} </style> <script> $(function(){ var canvas=document.getElem

我想我就快到了，但我可能错了。我试图让分组的圆弧扇区在一个方向上作为一个完整的圆来设置动画。如何在animateWheel函数中引用createWheel函数

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

代码如下：

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

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


圆弧3
h1{
字体系列：Arial、Helvetica、无衬线字体；
字号：1.5em；
颜色：#333；
}
#画布1{背景色：#699；}
圆弧
您的浏览器不支持HTML 5
//弧扇形变量
var centerX=200；
var centerY=200；
var半径=100；
var fullCircleDegree=360；
//动态弧段的闭合函数
var arccectors=function（num）{//外部函数定义了一个名为“num”的变量
var getNum=函数（）{
return 360/num；//内部函数可以访问外部函数的“num”变量
}
return getNum；//返回内部函数，从而将其公开给外部作用域
},
createArcSector=ArcSector（7）；
var rotateAngle=createArcSectors（）*Math.PI/180；
var startAngle=0*Math.PI/180；
var endAngle=createArcSector（）*Math.PI/180；
var animateRot=0；
window.requestAnimFrame=（函数（回调）{
return window.requestAnimationFrame | |
window.webkitRequestAnimationFrame | |
window.mozRequestAnimationFrame | |
window.oRequestAnimationFrame | |
window.msRequestAnimationFrame||
函数（回调）{
设置超时（回调，1000/60）；
};
})();
window.onload=函数（）{
createWheel（）；
}
函数createWheel（）{
var theCanvas=document.getElementById（'canvas1'）；
var context=canvas.getContext（'2d'）；
context.clearRect（0,0，canvas1.width，canvas1.height）；
弧（中心X、中心Y、半径、星形、端角、假）；
//创建弧扇区
对于（i=0；i<7；i++）{
上下文。翻译（centerX、centerY）；
上下文。旋转（旋转角度）；
translate（-centerX，-centerY）；
context.beginPath（）；
上下文。移动到（centerX、centerY）；
上下文.lineTo（中心X+半径，中心Y）；
弧（中心X、中心Y、半径、星形、端角、假）；
closePath（）；
stroke（）；
}
动画车轮（）；
}
函数animateWheel（）{
var theCanvas=document.getElementById（'canvas1'）；
var context=canvas.getContext（'2d'）；
//rotateAngle=animateRot*Math.PI/180；
旋转角度=.002；
控制台日志（旋转角度）；
动画师+=.002；
如果（旋转角度>360）{
动画师-=1；
}
requestAnimFrame（函数（）{
动画车轮（）；
});     
}

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);

}

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

下面是您的代码演示（稍微重构）：

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


正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
window.requestAnimFrame=（函数（回调）{
返回window.requestAnimationFrame | | | window.webkitRequestAnimationFrame | | | window.mozRequestAnimationFrame | | window.oRequestAnimationFrame | | window.msRequestAnimationFrame||
函数（回调）{
设置超时（回调，1000/60）；
};
})();
var PI2=数学PI*2；
var-cx=100；
var-cy=100；
var半径=30；
变量旋转=-Math.PI/2；
制作动画（）；
功能牵引轮（cx、cy、旋转）{
clearRect（0,0，canvas.width，canvas.height）；
ctx.save（）；
翻译（cx，cy）；
ctx.旋转（旋转）；
ctx.beginPath（）；
弧（0,0，半径，0，PI2，假）；
ctx.closePath（）；
for（var i=0；我感谢你的帮助！我的代码有误导性，我理解你为什么用你的方式制作轮子。你把我推向了正确的方向。我的意图是将这个“轮子”用作旋转菜单。这是一把小提琴，有一个基本的框架，感谢你的帮助。