Canvas Exercises and Learning notes (ii)

2016-11-06

Canvas Exercises and Learning notes second article

First of all, the following is still my study of the basic canvas after some of the small exercises, source code you can access my github:https://github.com/fanyear

Clock https://fanyear.github.io/Canvas/Clock/index.html

(magnifier) left mouse button https://fanyear.github.io/Canvas/Magnifier/index.html

Zoom Image https://fanyear.github.io/Canvas/ScaleImage/index.html

Star Animation Flashing https://fanyear.github.io/Canvas/StarTwinkling/index.html

Cool Timing Animation Effect https://fanyear.github.io/Canvas/Timer/index.html

Recommended MOOC Tutorials

1. Http://www.imooc.com/u/108955/courses?sort=publish (a series of tutorials are well organized)

2.http://www.imooc.com/learn/338 (star blink tutorial)

The following is my study notes, not a tutorial, not comprehensive, is a number of considerations, more is to forget when you can come back to see, hope to say bad or wrong, but also hope you advice.

The previous article tells about drawing lines, rectangles, gradients, graphic changes, and setting various properties, which will involve drawing the garden, the arc of the curve (), and the ArcTo () method.

Circle and Curve drawing

1. Arc ()

Arc () is an API function of HTML5 canvas that "creates arcs/curves (for creating circles or partial circles)".

Syntax: Context.arc (x,y,r,startangle,endangle,counterclockwise)

Parameter values:

Parameters	Describe
X	Center X coordinate
Y	Center Y coordinate
R	Radius of the Circle
StartAngle	The starting angle, measured in radians. (The Circle of the arc is 0 degrees in the Three o'clock position)
Endangle	The end angle, measured in radians.
Counterclockwise	Optional. The rules should be plotted counterclockwise or clockwise. False = clockwise, true = counterclockwise.

　　Attention:

1, whether clockwise or counterclockwise, the default angle position is 1-1, does not change.

2, the angle is the radian system.

　　　　

Figure 1-1

　　　　Instance:

　　　　　　

Figure 1-2

1 varCanvaswidth = 800;2 varCanvasheight = 600;3 4 varCanvas = document.getElementById ("Canvas");5 varContext = Canvas.getcontext ("2d");6 7Canvas.width =Canvaswidth;8Canvas.height =Canvasheight;9 Ten Context.beginpath (); OneContext.arc (400,300,200,0,2*Math.PI); AContext.stroke ();

Of course, you can also use arc () to draw the curve, just change the starting angle and the end angle is good.

Figure 1-3

　　　　　Code:

1 varCanvaswidth = 800;2 varCanvasheight = 600;3 4 5 varCanvas = document.getElementById ("Canvas");6 varContext = Canvas.getcontext ("2d");7 8Canvas.width =Canvaswidth;9Canvas.height =Canvasheight;Ten  One  A Context.beginpath (); -Context.arc (400,300,200,0, Math.PI); Change the terminating angle to pi -Context.stroke ();

2, ArcTo ()

　　　　The ArcTo () method is not the same as arc (), and it's OK to knock on the code. The ArcTo () method creates an arc/curve between two tangents on the canvas.

Syntax: ArcTo (X1,y1,x2,y2,radius)

Parameter values:

　　　　　　

Parameters	Describe
X1	Endpoint 1x coordinates
Y1	Endpoint 1 y-coordinate
X2	Endpoint 2 x coordinate
Y2	Endpoint 2 y-coordinate
Radius	Radius

　　　　　　　　arcTo()The method will take advantage of the angle formed by the three points of the current endpoint (X0,Y0), endpoint 1 (x1,y1) and Endpoint 2 (x2,y2) , and then draw an arc on a circle tangent to each side of the angle and with a radius radius . The beginning of the arc is the tangent point of the current endpoint's Edge and circle, and the end of the arc is the tangent point to the circle where the endpoint 2 (x2,y2) is located, and the arc drawn is the shortest length of the two tangent points. In addition, if the front end point is not the beginning of the arc, the arcTo() method adds a line segment from the current endpoint to the beginning of the arc.　　

Figure 1-4

Instance:

　　　　　　

Figure 1-5

varCanvaswidth = 800;varCanvasheight = 600;varCanvas = document.getElementById ("Canvas");varContext = Canvas.getcontext ("2d"); Canvas.width=Canvaswidth;canvas.height=Canvasheight;context.linewidth=5; Context.beginpath (); Context.moveto (200,200); Context.lineto (600,200); Context.lineto (600,600); Context.strokestyle= "#000"Context.stroke (); Draw Auxiliary line Context.beginpath (); Context.moveto (200,200); Context.arcto (600,200,600,600,300); Context.strokestyle= "Red"Context.stroke (); Drawing Curves

　　　　　　　　Notice the curve of the auxiliary line, and we can see that the end of the curve drawn by ArcTo () is not defined (600,600), but from the starting point (200,200) until the coordinate point tangent to the auxiliary line is stopped. And if the parameter radius is larger, what will happen?

Instance:

　　Figure 1-6

　　　　　　Code:

 var canvaswidth =N; var Canvasheight = +; varCanvas = document.getElementById ("Canvas");varContext = Canvas.getcontext ("2d"); Canvas.width=Canvaswidth;canvas.height=Canvasheight;context.linewidth=5; Context.beginpath (); Context.moveto (200,200); Context.lineto (600,200); Context.lineto (600,600); Context.strokestyle= "#000"Context.stroke (); Context.beginpath (); Context.moveto (200,200); Context.arcto (600,200,600,600,600); One parameter is changed to set the radius to 600context.strokestyle= "Red"Context.stroke ();

　　　　　　　　　　

As you can see, the starting point is still (200,200), but it has not been tangent to the auxiliary line to stop.

Practice makes perfect, knocking over the code a few times, you can "touch it".

I front-end small rookie, what said is wrong, also hope you forgive ha ~

　　

Canvas Exercises and Learning notes (ii)