In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-01-18 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/01 Report--
This article mainly shows you "how to use HTML5 Canvas API to draw arcs", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "how to use HTML5 Canvas API to draw arcs" this article.
Draw a standard arc
Before we begin, let's optimize our drawing environment. Inspired by the texture of last class, if you don't like this background, I have also provided other background images in the images directory for you to choose from. In addition, all the stylesheets are written down.
A new canvas
Body {background: url (". / images/bg3.jpg") repeat;}
# canvas {border: 1px solid # aaaaaa; display: block; margin: 50px auto;}
I can't believe your browser doesn't support Canvasations! Hurry up and change it!
_ window.onload = function () {
Var canvas = document.getElementById ("canvas")
Canvas.width = 800,
Canvas.height = 600,
Var context = canvas.getContext ("2d")
Context.fillStyle = "# FFF"
Context.fillRect (0Pol 0800600)
}
Running result:
The reason why we want to draw a blank rectangle to fill the canvas, because we said before, canvas is transparent, if you do not set the background color, then it will be covered by the texture I set, want to make it have a background color (white), the only way to draw a rectangle to cover canvas.
What do you think? is it very cool?
Use arc () to draw an arc
Arc () is used as follows:
JavaScript Code copies content to the clipboard
Context.arc (x, pr, y, r,
The first three parameters are the center coordinate and the radius of the circle. StartAngle and endAngle use arc values, not angle values. The Radian rule is absolute, as shown in the figure below.
Anticlockwise represents the method of drawing, whether to draw clockwise or counterclockwise. It passes a Boolean value, true for counterclockwise drawing, false for clockwise drawing, and the default value is false.
The rule of Radian is absolute. What does it mean? It refers to what kind of arc you want to draw. Just fill in the arc according to the above standard.
For example, if you draw the arc of 0.5pi ~ 1pi, if you draw it clockwise, it will only have 4 arcs in the lower left-hand corner; if you draw counterclockwise, it will be the 3-stroke-4 arc in the upper right corner that complements it. Try it yourself here, no more examples.
Use tangent points to draw arcs
Introduction to arcTo ():
The arcTo () method receives five parameters, which are the coordinates of the two tangent points and the arc radius. This method is to draw an arc according to the tangent, that is, one arc is determined by two tangents.
The details are as follows.
JavaScript Code copies content to the clipboard
ArcTo (x1 ~ y1 ~ x2 ~ 2 ~ radius)
This function draws an arc at a given radius, the starting point of the arc is tangent to the line from the position of the current path to the point (x1, y1), and the end of the arc is tangent to the line from the point (x1, y1) to (x2, y2). Therefore, it is usually used with moveTo () or lineTo (). Its ability can be replaced by the simpler arc (), whose complexity uses tangent points in the rendering method.
Use tangents to draw arcs:
I have also drawn the tangent in the following case to see it more clearly.
JavaScript Code copies content to the clipboard
Draw an arc
Body {background: url (". / images/bg3.jpg") repeat;}
# canvas {border: 1px solid # aaaaaa; display: block; margin: 50px auto;}
I can't believe your browser doesn't support Canvasations! Hurry up and change it!
_ window.onload = function () {
Var canvas = document.getElementById ("canvas")
Canvas.width = 800,
Canvas.height = 600,
Var context = canvas.getContext ("2d")
Context.fillStyle = "# FFF"
Context.fillRect (0Pol 0800600)
DrawArcTo (context, 200,200,600,200,600,400,100)
}
Function drawArcTo (cxt, x0, y0, x1, y1, x2, y2, r) {
Cxt.beginPath ()
Cxt.moveTo (x0, y0)
Cxt.arcTo (x1, y1, x2, y2, r)
Cxt.lineWidth = 6
Cxt.strokeStyle = "red"
Cxt.stroke ()
Cxt.beginPath ()
Cxt.moveTo (x0, y0)
Cxt.lineTo (x1, y1)
Cxt.lineTo (x2, y2)
Cxt.lineWidth = 1
Cxt.strokeStyle = "# 0088AA"
Cxt.stroke ()
}
This case also illustrates the role of the key points of arcTo (). In order to explain more clearly, I will mark another analysis diagram.
Note here that the starting point drawn by arcTo () is (x0, y0), but (x0, y0) is not necessarily the tangent of the arc. The real arcTo () function is only passed in (x1, y1) and (x2, y2). Where (x1, y1) is called the control point, and (x2, y2) is the tangent point at the end of the arc, which is not necessarily on the arc. But (x0, y0) must be on the arc.
A little bit around, let's try it by changing the parameters of the drawArcTo () function.
(x2, y2) not necessarily on the arc:
JavaScript Code copies content to the clipboard
DrawArcTo (context, 200,100,600,100,600,400,400)
(X0, Y0) must be on the arc:
JavaScript Code copies content to the clipboard
DrawArcTo (context, 400,100,600,100,600,400,400)
It's interesting that it directly connects the tangent point to (x0, y0) to form a segment in order to pass through (x0, y0). What a persistent arc...
The above is all the contents of the article "how to draw arcs with HTML5 Canvas API". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
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.
Views: 296
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.