I currently working on prototype which display some data as vague-meter: back-ground gray arc show start to end limit, the blue arc show the current value. I adding line-stroke at start and end of back-ground gray arc.
For drawing this I am using html canvas.
var ctx ;
var currVague=document.getElementById("currVague");
ctx = currVague.getContext("2d");
ctx.beginPath();
ctx.arc(122,122,99,0.81*Math.PI,0.19*Math.PI);
ctx.strokeStyle="#555";
ctx.lineWidth=16;
ctx.stroke();
ctx.beginPath();
ctx.arc(122,122,99,0.81*Math.PI,0.12*Math.PI);
ctx.strokeStyle="#3872C1";
ctx.lineWidth=16;
ctx.stroke();
ctx.strokeStyle="#949494";
ctx.moveTo(25,175);
ctx.lineTo(50,175);
ctx.lineWidth=5;
ctx.stroke();
This first time I am trying canvas, and not sure why the gray curve showing in foreground.
Just add a beginPath()
in the last section where you draw the line:
ctx.strokeStyle="#949494";
ctx.beginPath(); /// here needs to be a beginPath()
ctx.moveTo(25,175);
ctx.lineTo(50,175);
ctx.lineWidth=5;
ctx.stroke();
If you don't what happens is that the previous arc is still a part of the path and when you stroke it that arc and your newly added line will both be stroked. To "break" the path so-to-speak just call beginPath()
and only what is added afterwards will be stroked (or filled) next time.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.