开发者

HTML 5 Canvas arc() and lineTo() to draw tabs around a circle

开发者 https://www.devze.com 2023-04-05 17:09 出处:网络
I\'ve got a circle that I\'ve drawn on a canvas. I\'d like to draw tab-like objects surrounding this circle using 2 arcs that a开发者_开发问答re connected on each end with a line drawn at a certain an

I've got a circle that I've drawn on a canvas. I'd like to draw tab-like objects surrounding this circle using 2 arcs that a开发者_开发问答re connected on each end with a line drawn at a certain angle. Unfortunately, since the lineTo() method only accepts x & y coordinates I have to be able to translate where I want to draw to in those terms.

HTML 5 Canvas arc() and lineTo() to draw tabs around a circle

I can draw the first arc, going from point 4 to 1, but I don't know how to get the x and y coordinates of 1, nor how to figure out what the x and y coordinate of 2 would need to be. Once I'm at 2, I just need to increase the radius to draw the arc from 2 to 3 (or 3 to 2), but then I would need to know how to get the x, y coordinates of 4 so that I can call lineTo() and pass x and y of 4. I think this is probably some simple geometry or trigonometry involving Math.sin() and Math.cos() but I'm having a bit of a tough time figuring it out.


I've used something like the HTML5 Roulette Wheel.

This will give you those tabs you like, and you can play with the spacing between the tabs.

You won't need lineTo, you can just use the fill and stroke of each 'tab' to create that effect.

0

精彩评论

暂无评论...
验证码 换一张
取 消