How to use canvas to draw an ellipse and keep the line thickness uniform in html5
This article mainly explains "how to use canvas to draw an ellipse and keep the line thickness uniform in html5." interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to draw an ellipse with canvas in html5 and keep the line thickness uniform".
Drawing ellipse in Canvas is a very common requirement. The new HTML Canvas 2D Context W3C draft adds ellipse method to draw ellipse, but most browsers have not implemented this method yet, so it is necessary to use arc or arcTo method combined with scale deformation to draw ellipse.
Sample code:
Copy the code
The code is as follows:
Var ctx = documentquerySelector ('canvas') getContext (' 2d')
CtxlineWidth = "10"
Ctxscale (1 dint 2)
Ctxarc (150, 150, 100, 0, 0, 0, 5, 5, 5, 5, 2, 5, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 4, 4, 4, 4, 4, 3, 4, 4, 4, 4, 4, 4, 4, 4, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4,
Ctxstroke ()
Something is wrong, because the thickness of the line is uneven, and stroke is also affected by scale.
It takes a little trick to fix this problem.
Sample code:
Copy the code
The code is as follows:
[code]
Var ctx = documentquerySelector ('canvas') getContext (' 2d')
CtxlineWidth = "10"
Ctxsave ()
Ctxscale (1 dint 2)
Ctxarc (150, 150, 100, 0, 0, 0, 5, 5, 5, 5, 2, 5, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 1, 4, 4, 4, 4, 4, 3, 4, 4, 4, 4, 4, 4, 4, 4, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4,
Ctxrestore ()
Ctxstroke ()
[/ code]
It's even now. It's perfect.
The trick is to save the canvas state by save, then zoom, call path instructions, restore to restore the canvas state, and then stroke to draw it.
The key point is first save and then zoom, first restore and then stroke.
At this point, I believe you have a deeper understanding of "how to use canvas to draw an ellipse and keep the line thickness uniform in html5". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
