Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to achieve HTML5 Canvas to draw dots and dots". In daily operation, I believe many people have doubts about how to achieve HTML5 Canvas to draw dots and dots. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "how to achieve HTML5 Canvas to draw dots and dots". Next, please follow the editor to study!

HTML5 Canvas provides a lot of functions for drawing graphics, but unfortunately, Canvas API only provides the function of drawing solid lines (lineTo), but does not provide the method of drawing dotted lines. Such a design can sometimes cause great inconvenience, and David Flanagan, author of the JavaScript authoritative Guide, believes that such a decision is problematic, especially if the standard is relatively simple to modify and implement ("… 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), strictly speaking, a dotted line implementation (p.s. I think the simplified version of Rod MacDougall on this page is better. So, what if you need to draw dots and dots (as shown in the following illustration)?

The following is my own implementation, which only supports drawing horizontal and vertical dots and dots. You can refer to the methods of Phrogz and Rod MacDougall to add the function of diagonal drawing.

The code is as follows:

Var canvasPrototype = window.CanvasRenderingContext2D & & CanvasRenderingContext2D.prototype

CanvasPrototype.dottedLine = function (x1, y1, x2, y2, interval) {

If (! interval) {

Interval = 5

}

Var isHorizontal=true

If (x1==x2) {

IsHorizontal=false

}

Var len = isHorizontal? X2-x1: y2-y1

This.moveTo (x1, y1)

Var progress=0

While (len > progress) {

Progress + = interval

If (progress > len) {

Progress = len

}

If (isHorizontal) {

This.moveTo (x1 recording materials y1)

This.arc (x1 recording records, y1 recording, 1 reciting, 0 recording, 2 recording, Math.PIMagneTrue)

This.fill ()

} else {

This.moveTo (x1century y1progress)

This.arc (x1 recordy1 recording books, 1 record0meme 2 fugitive Math.PIMagneTrue)

This.fill ()

}

}

}

At this point, the study on "how to achieve HTML5 Canvas to draw dots and dots" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.