javascript - How do I create radiating lines using Canvas? -
i trying create gauge using canvas or svg. think going use canvas, unless people think lot easier make svg. question is, using canvas , no images, how go about, or, possible, create dashed lines around outside of gauge.
thanks
canvas choice if guage changing.
canvas @ redrawing quickly.
svg not quick @ redrawing, it’s if user interactivity required.
this canvas function draw radiant lines between inner , outer circle:
function radiantline(centerx,centery,innerradius,outerradius,degrees,linewidth,color){ var radians=degrees*math.pi/180; var innerx = centerx + innerradius * math.cos(radians); var innery = centery + innerradius * math.sin(radians); var outerx = centerx + outerradius * math.cos(radians); var outery = centery + outerradius * math.sin(radians); ctx.beginpath(); ctx.moveto(innerx,innery); ctx.lineto(outerx,outery); ctx.strokestyle=color; ctx.linewidth=linewidth; ctx.stroke(); } your gauge has values 0-1000.
here code useful in mapping (0-1000) range of values degrees (0-270) of gauge’s arc.
// scale guage values (0-1000) mapped // range of partial circle (0-270 degree arc) // value==0 mapped 0 degrees on arc // value==1000 mapped 270 degrees on arc var scaledvalue=scaleintorange(0,1000,0,270,value); function scaleintorange(minactual,maxactual,minrange,maxrange,value){ var scaled=(maxrange-minrange)*(value-minrange)/(maxactual-minactual)+minrange; return(scaled); } after incoming values mapped degrees on circle, rotate 135 degrees match starting angle on guage (0 degrees on guage approximately 135 degrees on circle)
// rotate guage value==0 starts @ 135 degrees on circle var degrees=scaledvalue+135; here code , fiddle: http://jsfiddle.net/m1erickson/gv8du/
<!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: 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 innerradius=50; var outerradius=65; var startradians=135*math.pi/180; var endradians=405*math.pi/180; for(var value=0;value<=1000;value+=25){ // scale guage values (0-1000) // fit range of partial circle (0-270 degrees) var scaledvalue=scaleintorange(0,1000,0,270,value); // rotate guagevalue==0 starts @ 135 degrees on circle var degrees=scaledvalue+135; // draw radiant line // draw thicker/longer line every 250 if(value%250==0){ radiantline(cx,cy,innerradius,outerradius,degrees,2,"black"); }else{ var shorterline=(outerradius-innerradius)/2; radiantline(cx,cy,innerradius,outerradius-shorterline,degrees,2,"lightgray"); } } // draw inner arc of guage ctx.beginpath(); ctx.arc(cx,cy,innerradius,startradians,endradians,false); ctx.strokestyle="black"; ctx.linewidth=3; ctx.stroke(); // draw outer arc of guage (for illustration only) ctx.beginpath(); ctx.arc(cx,cy,outerradius,startradians,endradians,false); ctx.strokestyle="lightgray"; ctx.linewidth=0.33; ctx.stroke(); function radiantline(centerx,centery,innerradius,outerradius,degrees,linewidth,color){ var radians=degrees*math.pi/180; var innerx = centerx + innerradius * math.cos(radians); var innery = centery + innerradius * math.sin(radians); var outerx = centerx + outerradius * math.cos(radians); var outery = centery + outerradius * math.sin(radians); ctx.beginpath(); ctx.moveto(innerx,innery); ctx.lineto(outerx,outery); ctx.strokestyle=color; ctx.linewidth=linewidth; ctx.stroke(); } function scaleintorange(minactual,maxactual,minrange,maxrange,value){ var scaled=(maxrange-minrange)*(value-minrange)/(maxactual-minactual)+minrange; return(scaled); } }); // end $(function(){}); </script> </head> <body> <canvas id="canvas" width=300 height=300></canvas> </body> </html>
Comments
Post a Comment