在画布中动画弧的最佳方法答案

【问题标题】：best way to animate arc in a canvas在画布中动画弧的最佳方法
【发布时间】：2014-02-27 12:06:21
【问题描述】：

我正在寻找在画布上创建多个圆（弧）的最佳/最有效方法。

我已经看到要创建多个圈子，您可以执行类似于 (http://webdesign.about.com/od/html5tutorials/a/draw-circles-on-html5-canvas.htm) 的操作

context.arc(x1,y,radius,0,Math.PI,true);
context.stroke();
context.beginPath();
context.arc(x2,y,radius,0,Math.PI,false);
context.stroke();
context.beginPath();
context.arc(x3,y,radius,0,Math.PI,true);
context.stroke();
context.beginPath();
context.arc(x4,y,radius,0,Math.PI,false);
context.stroke();

我正在尝试做的是循环通过 3 或 4 个大小不断增加的圆圈，为每个圆圈设置动画，从一种颜色设置动画并返回其原始颜色，然后移动到下一个圆圈并重复。我只是在想，我是否可以为每个圈子设置一个 id，或者将圈子放在我循环的数组/对象中？

像这样

circles = {
    circle1 : '',
    circle2 : '',
    circle3 : ''
}

在第一个示例中，我不知道如何控制每个圈子来处理它。

【问题讨论】：

标签： javascript html animation canvas

【解决方案1】：

“最佳和最有效”很大程度上取决于您的情况。

最快的绘图
使用的内存最少
最少的重绘
许多其他可能性！

按照您的建议进行操作并将您的圆圈定义放入一个数组中然后使用该数组来绘制您的圆圈是相当有效的。

这是一个示例，它使用一组圆定义来为颜色变化的同心圆设置动画。

演示：http://jsfiddle.net/m1erickson/R5D7M/

示例代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<script src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
    $(function(){

        var canvas=document.getElementById("canvas");
        var ctx=canvas.getContext("2d");
        var cx=150;
        var cy=150;
        var PI2=Math.PI*2;
        var radius=0;

        // these are the circle definitions kept in an array
        // each definition holds: radius, color, stroke-width
        var circles=[];

        // add some test circles
        addCircle(15,"red");
        addCircle(15,"green");
        addCircle(15,"blue");
        addCircle(15,"purple");
        addCircle(15,"lightblue");
        addCircle(15,"lightgreen");
        addCircle(15,"maroon");
        var targetIndex=0;


        function addCircle(lineWidth,color){
            if(radius==0){
                radius=lineWidth/2;
            }else{
                radius+=lineWidth;
            }
            circles.push({radius:radius,color:color,width:lineWidth});
        }


        // draw 1 circle based on its definition
        // "color" specifies the alternate color for the circle
        function drawCircle(circle,color){
                ctx.beginPath();
                ctx.arc(cx,cy,circle.radius,0,PI2);
                ctx.closePath();
                ctx.lineWidth=circle.width;
                ctx.strokeStyle=color;
                ctx.stroke();
        }


        // animate at about 1 frame-per-second
        var fps = 1;
        function animate() {
            setTimeout(function() {
                // request another animation loop
                requestAnimationFrame(animate);
                // Drawing code goes here
                ctx.clearRect(0,0,canvas.width,canvas.height);
                for(var i=0;i<circles.length;i++){
                    var circle=circles[i];
                    var color=circle.color;
                    if(i==targetIndex){ color="gold"; }
                    drawCircle(circles[i],color);
                }
                // target the next circle
                if(targetIndex++ > circles.length){ targetIndex=0; }
            }, 1000 / fps);
        }

        // start!
        animate();        

    }); // end $(function(){});
</script>
</head>
<body>
    <h4>Each stroked circle will animate to gold color</h4>
    <canvas id="canvas" width=350 height=350></canvas>
</body>
</html>

【讨论】：

我需要制作一个圆圈数组（有时它们会像街机游戏蜈蚣一样成为蜈蚣）我想在画布上绘制它，然后将它从画布顶部向下移动屏幕，如果它跑进另一个圆圈，那么它会随机走向不同的方向。就像蜈蚣一样。
此问题/答案与您的蜈蚣游戏没有直接关系。但是这个答案的这些概念可能会在您的游戏中使用：用于存储圆定义的 circles[] 数组，用于以可重用方式创建和绘制圆的 addCircle() 和 drawCircle() 函数，用于有效运行您的 requestAnimationFrame()动画循环（当然有不同的动画代码）。因此，设计和编写游戏的基础知识……如果遇到问题，请提出新的 Stackoverflow 问题。祝你的游戏好运！