Canvas practice Small instance two--sector

As the saying goes: Hair map not seed, chrysanthemum million people stab! I would like to extend this: teaching does not give an example, said you are stupid! Gee, it's a rhyme, hehe, a joke!

We have talked about the four API knowledge, it is estimated that everyone is also boring very ah, the small example of the front is too simple, it does not quench thirst ah, but also can not eat a fat breath, and then give us a small example, to everyone to mention the refreshing!

In front of the painting circle, we left a thought, or a pit bar, is how to draw a fan? We know the way to draw a circle can not be able to draw a fan, I then provided a method, do not know whether people have an impression, no impression it doesn't matter, I repeat again: if I draw an arc, and then draw 2 lines in the center of the circle, respectively connected to the beginning and end of the arc, then this is not a circle? So can this method actually draw a circle? In fact, I do not know, then we will try:

The first step is to draw an arc:

// move the origin to the 100,100 position ctx.translate (+); // Draw an arc Ctx.arc (0,0,100,30*math.pi/180, 60*math.pi/180);
Ctx.stroke ();

At this point, we are familiar with the method of drawing arcs, now to begin to draw the line, this is the key, we first analyze, knife-sharpening does not cost wood workers!

A straight line is made up of 2 points, now we know the center point, the 2nd point is the starting point and the end point of the arc, then how do we get the 2 coordinates? Let's draw a picture to analyze:

We probably want to draw such a fan, painting the more ugly, will look at, if we follow the mathematical thinking, according to the angle formula of a calculation, may be able to get the coordinates of these 2 points, but I feel I think of it all think that this operation how to copy, I am not good at math, not willing to count, there is a simple way You don't have to be such a brain-savvy? (Sorry, my "memory" is obviously inadequate) I have a bold hypothesis, that is, if the fan is not so inclined, but one side of the horizontal, for example:

So I can easily get the first line, that is the line on the horizontal axis, you do not understand? Well, that's it, the center coordinates we know, the radius we know, the beginning of the arc coordinates is very easy, understand, that another line how to do? If you have just read the knowledge of the previous API, we are hot, it is easy to think of rotate () method, that is, we draw a center to the beginning of the line, arc angle we know, good, we will be the new picture of this line to choose the angle of arc, that is not the end of it? Damn, I'm so witty! Let's try it out:

// Arc Ctx.save (ctx.translate);Ctx.arc(0,0,100,0, 30*math.pi/180); Ctx.restore (); // First line Ctx.save (); Ctx.moveto (100,100); Ctx.lineto (200,100); Ctx.restore (); // Second Line Ctx.save (ctx.translate);ctx.moveto(0,0); Ctx.rotate (30*math.pi/180); Ctx.lineto (100,0); Ctx.stroke (); Ctx.restore ();

Wow, it's just a light, sure enough ah, according to this idea, if we now turn this fan rotation an angle, this angle = the angle of the second line-the angle of the first line, then what is not the front we need the fan? But the previous code directly rotates only the arc, the line does not rotate, we modify:

Still look at this picture, we can change a way of thinking, if the arc is drawn in the target position, and then draw 2 angles to 0 of the 2 lines, and then rotate to the start point and end point of the arc, it is not OK? (because we know the starting angle and the end angle of the arc) try it:

// set the origin point to 100,100 position ctx.translate (100,100); // The origin is at 100,100, the center is set to the position of 0,0--> 100,100 Ctx.arc (0,0,100,30*math.pi/180,60*math.pi/180); // Save (), restore () is to prevent the pollution of angle rotation Ctx.save (); Ctx.rotate (30*math.pi/180); Ctx.moveto (0,0); Ctx.lineto (100,0); Ctx.restore (); Ctx.rotate (60*math.pi/180); Ctx.moveto (0,0); Ctx.lineto (100,0); Ctx.stroke ();

Gee, really can ah, haha, some people will ask, your first step is why set the origin, why not moveto to set the starting point? Good question, because the default origin of the canvas in the location of the 0,0, if using MoveTo to set the starting point, the origin is still in the position of 0,0, the previous section of the API we will transform the time to say that the transformation is based on the origin point, even if you set the starting point, but the starting point is not the origin, Graphics rotation will still revolve around 0, 0 point rotation and then rotation, the resulting graphics do not know what the figure is, the angle of deviation is difficult to rectify, for this or not quite understand the students can write an example of their own experience, perhaps understand a bit more profound, here as an exercise, not here to write!

The above code can be optimized, for example, when we draw the first line, we use Save () and restore (), which does not only prevent the outer property or method from affecting the drawing, it essentially means save () saves the state of the current environment, restore () Returns the state of the previously saved path, what does that mean, for a chestnut, save () is like a maze in the entrance, restore () want to be the exit of this maze, but found here is the maze of the intersection, out of the maze, in the maze of concrete is how to walk, do not know, This will prevent you from external factors to affect your path to the maze, there is a detail to note that when you go in the door, you come out of the door, and, um, this can be used, which is equivalent to the brush contact, restore contact, we look at the restored contact where:

// set the origin point to 100,100 position ctx.translate (100,100); // The origin is at 100,100, the center is set to the position of 0,0--> 100,100 Ctx.arc (0,0,100,30*math.pi/180,60*math.pi/180); // Save (), restore () is to prevent the pollution of angle rotation Ctx.save (); Ctx.rotate (30*math.pi/180); Ctx.moveto (0,0); Ctx.lineto (100,0); Ctx.restore (); Ctx.rotate (60*math.pi/180); Ctx.lineto (100,0); Ctx.stroke ();

Incredibly get the result, from the 2nd graph can see the position of the restored contact in the initial point of the arc, in fact, here we are ignoring a problem, that is, the line in the rotation, is from its starting point for the center of rotation, and the above code is, the first line from the center, to the beginning of the arc (after rotation) Nature is now the starting point is the beginning of the arc, the second line how to draw, it is not the result of rotation we want, so here we need special attention, now we will be the first line of the starting point in the (r,0) position, after the rotation to the beginning of the arc, and then in the center of the circle to draw the place, Now the starting point is the center, and then draw a line to the arc, oh, now let's do it again:

// set the origin point to 100,100 position ctx.translate (100,100); // The origin is at 100,100, the center is set to the position of 0,0--> 100,100 Ctx.arc (0,0,100,30*math.pi/180,60*math.pi/180); // Save (), restore () is to prevent the pollution of angle rotation Ctx.save (); Ctx.rotate (30*math.pi/180); Ctx.moveto (100,0); Ctx.lineto (0,0); Ctx.restore (); Ctx.rotate (60*math.pi/180); Ctx.lineto (100,0); Ctx.stroke ();

Look, this is what we want to figure, so, a few of the above mistakes are more prone to make mistakes, need special attention!

According to this principle, we can actually also use another way, is to fully use the function of the contact point, how to say, when we draw the arc, after drawing its contact at the end of the arc position, such a godsend, why not directly this contact as a starting point, draw a line to the center, can not be rotated less once? Then draw the second line, simply feel the saving time and effort, we look at the effect:

// set the origin point to 100,100 position ctx.translate (100,100); // The origin is at 100,100, the center is set to the position of 0,0--> 100,100 Ctx.arc (0,0,100,30*math.pi/180,60*math.pi/180); // Draw Straight Line Ctx.lineto (0,0) with Arc end as the starting point ; Ctx.rotate (30*math.pi/180); // Draw Straight Line Ctx.lineto (100,0) with 0,0 as the starting point ; Ctx.stroke ();

You see, with this theory, even save (), restore () can be saved, because there is only one rotation, the code is a lot less, the effect is the same, haha, in order to be able to reuse, we need to encapsulate him:

The first type:

CanvasRenderingContext2D.prototype.sector =function(x,y,r,sdeg,edeg) { This. Save ();  This. Translate (x, y);  This. Beginpath ();  This. Arc (0,0,r,sdeg*math.pi/180,edeg*math.pi/180);  This. Save ();  This. Rotate (sdeg*math.pi/180); This. MoveTo (r,0);  This. LineTo (0,0);  This. Restore ();  This. Rotate (edeg*math.pi/180); This. LineTo (r,0);  This. Restore (); return  This; } ctx.sector (100,100,100,30,60). stroke (); Ctx.sector (100,100,100,90,120). Fill (); Ctx.sector (100,100,100,160,180). stroke ();

The second type:

CanvasRenderingContext2D.prototype.sector =function(x,y,r,sdeg,edeg) { This. Save ();  This. Translate (x, y);  This. Beginpath ();  This. Arc (0,0,r,sdeg*math.pi/180,edeg*math.pi/180);  This. LineTo (0,0);  This. Rotate (sdeg*math.pi/180); This. LineTo (r,0);  This. Restore (); return  This; } ctx.sector (100,100,100,30,60). stroke (); Ctx.sector (100,100,100,90,120). Fill (); Ctx.sector (100,100,100,160,180). stroke ();

Do you think it's over? When we fully understand the basic knowledge of CANVASAPI, we will also get another way to draw a fan, almost 6 to explode! Haha, huh! What is it exactly? We then looked down:

When we talked about Beginpath () and Closepath () at the beginning of the basics, some people would say, is this just the start path and the closed path? What does this have to do with a picture fan? Yes, you're right about that, okay, now please read it aloud: Closed path! Closed Path! Closed Path! Important things say 3 times, now your heart is not so a little feeling, yes, do not feel shy, do not feel depressed, is it, is it, speak it aloud, is this feeling, what? You don't feel anything, there's an expression here, okay, I'll tell you how I feel:

There is a place to say, why use translate, and not moveto, because we need to rotate, so we need the origin, now if we do not need to rotate, but the normal drawing, then we do not need the origin, we can use the MoveTo, OK, If we cooperate with Beginpath () and Closepath (), we will enclose an arc, and think about how the segment of the triangle we are talking about is going to become a triangle, yes, is there a sense now? Or a wooden one? Well, let's look at a chestnut:

Ctx.beginpath (); // definition starting point ctx.moveto (100,100); // Draw a circular arc ctx.arc (100,100,100,30*math.pi/180, 60*math.pi/180) with a radius of 100 at the center of the starting point, Ctx.closepath (); Ctx.stroke ( );

Look, just a few lines, you can draw a fan, on the top of the image, is not the same? We encapsulate:

CanvasRenderingContext2D.prototype.sector =function(x,y,r,angle1,angle2) { This. Save ();  This. Beginpath ();  This. MoveTo (x, y);  This. Arc (x,y,r,angle1*math.pi/180,angle2*math.pi/180,false);  This. Closepath ();  This. Restore (); return  This; } ctx.sector (100,100,100,30,60). stroke (); Ctx.sector (100,100,100,90,120). Fill (); Ctx.sector (100,100,100,160,180). stroke ();

The effect is the same, but the idea is not the same, perhaps there are other ways to draw fan, if you have a better way, hope to leave your code, we learn from each other!

Fan-shaped method has, the specific use which can be based on their own preferences, I will follow the 3rd type to write a small application, pie chart:

CanvasRenderingContext2D.prototype.sector =function(x,y,r,angle1,angle2) { This. Save ();  This. Beginpath ();  This. MoveTo (x, y);  This. Arc (x,y,r,angle1*math.pi/180,angle2*math.pi/180,false);  This. Closepath ();  This. Restore (); return  This; } Ctx.fillstyle= ' Red '; Ctx.sector (200,200,100,30,150). Fill (); Ctx.fillstyle= ' Green '; Ctx.sector (200,200,100,150,270). Fill (); Ctx.fillstyle= ' Blue '; Ctx.sector (200,200,100,270,390). Fill ();

Write a fan countdown again:

CanvasRenderingContext2D.prototype.sector =function(x,y,r,angle1,angle2) { This. Save ();  This. Beginpath ();  This. MoveTo (x, y);  This. Arc (x,y,r,angle1*math.pi/180,angle2*math.pi/180,false);  This. Closepath ();  This. Restore (); return  This; }                varAngle = 0; varTimer =NULL; Ctx.fillstyle= ' Green '; SetInterval (function() {angle+=5; Ctx.sector (200,200,100,0, Angle). Fill (); if(Angle = = 360) {clearinterval (timer);              }        },200);

You think I'm just writing a few examples for you to see? You are still too young, the reason to throw out these 2 examples, is to extend the idea, we can add a little something on these effects, whether the effect is not the same, for example, the first pie chart, if we add a white circle in the middle, what will happen?

CanvasRenderingContext2D.prototype.sector =function(x,y,r,angle1,angle2) { This. Save ();  This. Beginpath ();  This. MoveTo (x, y);  This. Arc (x,y,r,angle1*math.pi/180,angle2*math.pi/180,false);  This. Closepath ();  This. Restore (); return  This; } Ctx.fillstyle= ' Red '; Ctx.sector (200,200,100,30,150). Fill (); Ctx.fillstyle= ' Green '; Ctx.sector (200,200,100,150,270). Fill (); Ctx.fillstyle= ' Blue '; Ctx.sector (200,200,100,270,390). Fill (); Ctx.fillstyle= ' #fff '; Ctx.sector (200,200,80,0,360). Fill ();

See, this effect is not become another effect, such as a second effect, we also add a white circle, see what effect:

CanvasRenderingContext2D.prototype.sector =function(x,y,r,angle1,angle2) { This. Save ();  This. Beginpath ();  This. MoveTo (x, y);  This. Arc (x,y,r,angle1*math.pi/180,angle2*math.pi/180,false);  This. Closepath ();  This. Restore (); return  This; }        varAngle = 0; varTimer =NULL; SetInterval (function() {angle+=5; Ctx.fillstyle= ' Green '; Ctx.sector (200,200,100,0, Angle). Fill (); Ctx.fillstyle= ' #fff '; Ctx.sector (200,200,80,0,360). Fill (); if(Angle = = 360) {clearinterval (timer); }                    },200);

See, this effect is not can do a lot of effect, of course, because there is no animation effect, now the effect is very blunt, need everyone to improve, as long as you open the brain hole, in fact, fan or can make a lot of very cool effect, of course, the effect is to be polished, this is just a point, if you have better, More cool effect, please do not hesitate to share a bit, today it is here, thank you for your support!

Canvas practice Small instance two--sector