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.

enter image description here

thanks

canvas choice if guage changing.

canvas @ redrawing quickly.

svg not quick @ redrawing, it’s if user interactivity required.

enter image description here

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

Popular posts from this blog

Django REST Framework perform_create: You cannot call `.save()` after accessing `serializer.data` -

-
i have following viewset: class artistprofileviewset(viewsets.modelviewset): queryset = artistprofile.objects.all() serializer_class = artistprofileserializer def perform_create(self, serializer): if serializer.is_valid(): serializer.save() with following serializers: class simpleartisttrackserializer(serializers.hyperlinkedmodelserializer): class meta: model = artisttrack fields = (...my fields...) class artistprofileserializer(serializers.hyperlinkedmodelserializer): owners = userserializer(many=true, required=false) tracks = simpleartisttrackserializer(many=true, required=false) class meta: model = artistprofile fields = (...my fields...) i getting following error: assertionerror: cannot call `.save()` after accessing `serializer.data`.if need access data before committing database inspect 'serializer.validated_data' instead. i don't see editing serializer.data object. th...
Read more

Why does Go error when trying to marshal this JSON? -

-
i'm trying rather simple example of trying decode json file structs using golang. however, when attempting error that json: cannot unmarshal object go value of type []main.track which don't understand. here's code in question, , json can found here . package main import ( "encoding/json" "fmt" "net/http" "os" ) // tracks group of track types type tracks struct { tracks []track } // track represents singular track type track struct { name string url string artist artist } // artist represents single artist type artist struct { name string mbid string url string } func main() { url := "http://ws.audioscrobbler.com/2.0/?method=geo.gettoptracks&api_key=c1572082105bd40d247836b5c1819623&format=json&country=netherlands" response, err := http.get(url) if err != nil { fmt.printf("%s\n", err) os.exit(1) } de...
Read more