JavaScript HTML5-Canvas - Drawing an Arc with SetInterval Causes Jagged Edges

问题

I'm trying to draw a donut chart, and so far I've been successful. The problem is that when trying to animate the arc by combining stroke() with setInterval(), it works, but it does not look smooth, and produces jagged edges. I tried using clearRect() to clear the canvas after the animation was done and re-add the final version of the animation, but I must have been using clearRect() wrong, because it did nothing. If you have any ideas on how to get this looking good, I'd really appreciate it.

You can see my current code on jsfiddle: http://jsfiddle.net/4mJCy/ and below:

Body:

<canvas id="Donutchart" width="215" height="500" style="border:1px solid #000;">
Your browser does not support the HTML5 canvas tag.  Please Upgrade to the latest version of Chrome, Firefox, or Safari.</canvas>

JavaScript:

var canvas=document.getElementById("Donutchart");
var maincircle=canvas.getContext("2d");
maincircle.beginPath();
maincircle.arc(107,107,100,0,2*Math.PI);
maincircle.fillStyle="#FF0000";
maincircle.fill();



var currentEndAngle = 1.5;
var currentStartAngle = 1.5;

var pie1 = setInterval(draw, 15);

var counter = 0;

function draw(){


    if(counter >= 101){



    } else {

        var startAngle = currentStartAngle * Math.PI;
        var endAngle = (currentEndAngle) * Math.PI;

        currentEndAngle = currentEndAngle + 0.01;

        var counterClockwise = false;


        var donutslice1=canvas.getContext("2d");    
        donutslice1.beginPath();
        donutslice1.arc(107,107,75,startAngle,endAngle);
        donutslice1.lineWidth = 50;
        donutslice1.strokeStyle="#222";
        donutslice1.stroke();

    }



    counter++;

}


var innercircle=canvas.getContext("2d");
innercircle.beginPath();
innercircle.arc(107,107,50,0,2*Math.PI);
innercircle.fillStyle="#FFF";
innercircle.fill();

回答1:

The jaggies are caused by repeatedly over-writing your arcs.

Instead, refactor your code to clear the canvas with each animation loop.

A Demo: http://jsfiddle.net/m1erickson/xNLEQ/

Something like this:

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

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var currentEndAngle = 1.5;
    var currentStartAngle = 1.5;

    var pie1 = setInterval(draw, 15);

    var counter = 0;

    function draw(){

      if(counter >= 101){

      } else {

        var startAngle = currentStartAngle * Math.PI;
        var endAngle = (currentEndAngle) * Math.PI;

        currentEndAngle = currentEndAngle + 0.01;

        var counterClockwise = false;

        ctx.clearRect(0,0,canvas.width,canvas.height);
        // red
        drawCircle(75,"#FF0000");
        // gray
        drawDonut(startAngle,endAngle);

      }

      counter++;
    }

    //
    function drawDonut(startAngle,endAngle){
        ctx.beginPath();
        ctx.arc(107,107,75,startAngle,endAngle);
        ctx.lineWidth = 50;
        ctx.strokeStyle="#444";
        ctx.stroke();
    }
    //
    function drawCircle(radius,color){
        ctx.beginPath();
        ctx.arc(107,107,radius,0,2*Math.PI);
        ctx.lineWidth = 50;
        ctx.strokeStyle=color;
        ctx.stroke();
    }

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

来源：https://stackoverflow.com/questions/22899403/javascript-html5-canvas-drawing-an-arc-with-setinterval-causes-jagged-edges

标签

javascript

canvas

html5-canvas

setinterval

animated