去除在 HTML5 Canvas 中绘制某些动画时的闪烁

Question

我已经开始将一个圆圈分成不同的部分，使每个部分成为一个菜单项。

<canvas id="myCanvas" width="500" height="500"></canvas>

使用脚本：

var sec = 0;

    $(document).ready(function(){ 

        var redrawTimer = setInterval(function(){
            // start drawing the chart
            init(); 
            //Increment Counter
            sec++;

            if( sec == 200 ){//After 2 Secs, Stop animation
                clearInterval(redrawTimer);
                clearInterval(this);
            }
        },10);


    });
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');

    // center the drawing
    var x = canvas.width / 2;
    var y = canvas.height / 2;

    // number of days
    var days = 2;

    // number of segments
    var hours = 8;
    var hoursFull = 1;

    // one segment represents a menu item so divide degrees by hours
    var segmentWidth = 352 / hours;
    var segmentWidthFull = 360 / hoursFull;

    // begin at 0 and end at one segment width
    var startAngle = 1;
    var startAngleFull = 1;
    var endAngle = segmentWidth;
    var endAngleFull = segmentWidthFull;

    // how thick you want a segment
    var segmentDepth = 80;

    function init(){
        for(var i=1; i <= days; i++) {
            drawSegments(i*segmentDepth, i, sec);
        } 
    }
    var prevStart = 1;
    var prevEnd = segmentWidth;
    function drawSegments(radius,dayNumber) {   

        for(var i = 0; i < hours; i++){         
            context.beginPath();

            if( dayNumber == 2 ){
                context.strokeStyle = '#f7941e';
                if( i == 0 ){
                    prevStart = startAngle;
                    prevEnd = endAngle;
                    startAngle = 271 + sec;
                    endAngle = segmentWidth + 271 + sec;
                    context.strokeStyle = '#fff';
                }else{
                    startAngle = prevStart;
                    endAngle = prevEnd;
                }
            }
            else{
                context.strokeStyle = 'rgba(0,0,0,0)';
            }

            context.arc(x, y, radius, (startAngle * Math.PI / 180), (endAngle * Math.PI / 180), false);
            context.lineWidth = segmentDepth;

            context.stroke();  
            startAngle += segmentWidth + 1;
            endAngle += segmentWidth + 1;
        }
    }

我了解不断重绘图像会导致闪烁。有没有办法解决这个问题，因为我没有使用图像加载到缓存中以增加绘制时间？

我是画布的新手，因此我们将不胜感激。

我创建了一个example

Answer 1

您的问题并不清楚您的设计需求，但这里有一些实用功能。

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

这个函数会画出你的 8 弧金圆：

    var PI2=Math.PI*2;
    var cx=150;
    var cy=150;
    var radius=110;
    var arcCount=8;
    var angleIncrement=PI2/arcCount;
    var divider=PI2/90;
    var startTime;


    function drawGoldArcs(){
        ctx.strokeStyle="gold";
        for(var i=1;i<=arcCount;i++){
            var starting=angleIncrement*(i-1);
            var ending=angleIncrement*(i)-divider;
            ctx.beginPath();
            ctx.arc(cx,cy,radius,starting,ending);
            ctx.stroke();
        }
    }

此函数将根据经过的时间绘制动画白色弧线：

    function drawWhiteArc(elapsed){
        var starting=PI2*elapsed/animationDuration-divider;
        var ending=starting+angleIncrement;
        ctx.beginPath();
        ctx.arc(cx,cy,radius,starting,ending);
        ctx.strokeStyle="white";
        ctx.stroke();
    }

这个函数使用 requestAnimation 来为金色弧线周围的白色弧线设置动画：

    function animate(time){
        if(!startTime){startTime=time;}
        var elapsed=time-startTime;
        if(elapsed<animationDuration){requestAnimationFrame(animate);}

        ctx.clearRect(0,0,canvas.width,canvas.height);
        drawGoldArcs();
        drawWhiteArc(elapsed);
    }