JavaScript HTML5-Canvas - Drawing an Arc with SetInterval Causes Jagged Edges -
i'm trying draw donut chart, , far i've been successful. problem when trying animate arc combining stroke() setinterval(), works, not smooth, , produces jagged edges. tried using clearrect() clear canvas after animation done , re-add final version of animation, must have been using clearrect() wrong, because did nothing. if have ideas on how looking good, i'd appreciate it.
you can see current code on jsfiddle: http://jsfiddle.net/4mjcy/ , below:
body:
<canvas id="donutchart" width="215" height="500" style="border:1px solid #000;"> browser not support html5 canvas tag. please upgrade 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();
the jaggies caused repeatedly over-writing arcs.
instead, refactor code clear canvas each animation loop.
a demo: http://jsfiddle.net/m1erickson/xnleq/
something 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>
Comments
Post a Comment