个人中心
gpt4 book ai didi

javascript - 在 Canvas 中制作弧形动画的最佳方式

转载 作者：行者123 更新时间：2023-11-30 17:38:32 25 4
gpt4 key购买 nike

我正在寻找在 Canvas 上创建多个圆(弧)的最佳/最有效的方法。

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

在第一个示例中，我看不出如何获取每个圆圈来对其进行处理。

最佳答案

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

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

按照您的建议将您的圆圈定义放在一个数组中，然后使用该数组绘制您的圆圈是相当有效的。

下面是一个示例，它使用一组圆定义来制作变色同心圆的动画。

演示: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>

关于javascript - 在 Canvas 中制作弧形动画的最佳方式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21536936/

25 4 0
文章推荐： javascript - UTF-8 字符串上的 Parsefloat 返回 NaN
文章推荐： javascript - 使用 Angular 从 JSON 调用单个结果
文章推荐： javascript - 数组缓冲区不适用于 webgl
文章推荐： javascript - 跳过 MP3 会导致播放器在 Webkit 浏览器中中断
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com