This article mainly introduces HTML5 Canvas to draw dotted lines. HTML5 does not provide a method to draw dotted lines. This article is modified based on Stack Overflow method. Friends who need it can refer to it.
HTML5 Canvas provides many functions for drawing graphics, but unfortunately, the Canvas API only provides functions for drawing solid lines (lineTo), but does not provide methods for drawing dotted lines. Such a design can sometimes cause great inconvenience. David Flanagan, author of the Authoritative Guide to JavaScript, believes that such a decision is problematic, especially when the modification and implementation of the standards are relatively simple (… something that is so trivial to add to the specification and so trivial to implement… I really think you 're making a mistake here —http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-May/011224.html).
On Stack Overflow, Phrogz provides its own implementation of dotted lines (http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas), which strictly speaking is an implementation of dotted lines (ps I think the simplified version of Rod MacDougall on this page is better). So, what should I do if I need to draw dotted lines (as shown in the figure below)?
The following is my own implementation, which only supports drawing horizontal and vertical dot dotted lines. You can refer to the method of Phrogz and Rod MacDougall to add the function of slash drawing.
Copy the code