Question

我正在研究在画布上创建多个圆圈（弧线）的最佳/最有效方法。

我已经看到要创建多个圆圈，您可以执行类似于（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 : ''
}

在第一个例子中，我不知道如何抓住每个圆圈来做一些事情。

Answer 1

“最好，最有效率”在很大程度上取决于你的情况。

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

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

这是一个使用圆形定义数组来动画颜色变化同心圆的示例。

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

enter image description here

示例代码：

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

在画布中制作弧形动画的最佳方法

1 个答案: