"HTML" "learning" 2, canvas Learning notes "on"

Canvas is the new standard solution for developing cross-platform animations and games in HTML, enabling pixel-level manipulation of images and video.

First, add a canvas element to the page

Just like adding a normal div, the canvas is added as follows:

<canvas id = "MyCanvas" width = "200px" height = "100px" > partially displayed when not supported </canvas>

You can use CSS to add styles to a canvas using a method that adds a style to the DIV

Ii. using canvas to draw graphics

The canvas itself does not draw, and you need to use JavaScript to complete the drawing.

1. Draw a simple rectangle:

<canvas id= "MyCanvas" style= "border:1px solid;" width= "400px" \

height= "200px" > your browser does not support canvas elements! </canvas>

<script type= "Text/javascript" >

var c = document.getElementById ("MyCanvas");

var context = C.getcontext ("2d");

Context.fillstyle = "#FF00FF";

Context.fillrect (100,50,200,100);

</script>

After running on the Web page you will see a purple-red rectangle drawn in the canvas box

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/73/3A/wKioL1X4CcrgZH5ZAABCRshFdP0984.jpg "title=" Qq20150915195400.png "alt=" Wkiol1x4ccrgzh5zaabcrshfdp0984.jpg "/>

Code Explanation:

First, use getElementById ("MyCanvas") to find the canvas element

Then, call the canvas's GetContext ("2d") method to create a drawing object while drawing with the 2d environment

Finally, the drawing is done by changing the value of the property of the drawing object.

2. Draw graphics with coordinates

Using coordinates in the above, we can draw precise graphs by using coordinates.

<canvas id= "Linecanvas" style= "border:1px solid;" width= "400px" \

height= "300px" > your browser does not support canvas elements! </canvas>

<script>

var L = document.getElementById ("Linecanvas");

var line = L.getcontext ("2d");

Line.moveto (0,0);

Line.lineto (200,200);

Line.lineto (400,0);

Line.stroke ();

</script>

When the above code runs, a polyline appears in a 400x300 rectangular box

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/73/39/wKioL1X4CR-BuRv7AABZrjQ22Bk616.jpg "title=" Qq20150915195044.png "alt=" Wkiol1x4cr-burv7aabzrjq22bk616.jpg "/>

Code Explanation:

As shown in 1, locate the canvas element and create a graphical object.

Call this graphical object's MoveTo () method to position the shape starting at (0,0)

Call the LineTo () method to create 2 lines for the object (if it is not preceded by MoveTo (), the current coordinates will continue)

Call the stroke () method to draw the 2 lines

In 1 of the code, you can use the Strokestyle and Strokerect methods of a drawing object to draw outlines

Context.strokestyle = "#00";

Context.strokerect (100,50,200,100);

The above code adds a black outline to the rectangle.

3. Draw a Circle

Draw a circle using the Beginpath, arc, Closepath, and fill methods

<canvas id= "Printroundcanvas" style= "border:1px solid;" Width= "400px" height= "300px" > your browser does not support CANVAS</CANV As>

<script>

var r = document.getElementById ("Printroundcanvas");

var oround = R.getcontext ("2d");

Oround.fillstyle = "#FF00FF";

Oround.beginpath ();

Oround.arc (200,150,100,0,math.pi*2,true);

Oround.closepath ();

Oround.fill ();

</script>

When the above code is run, a Japanese flag is drawn in a 400x300 rectangle.

The center of the circle is at coordinates (200,150) and the radius is 100px.

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/73/3A/wKioL1X4DmfSHOw5AABgpsbEqto363.jpg "title=" Qq20150915201340.png "alt=" Wkiol1x4dmfshow5aabgpsbeqto363.jpg "/>

Code Explanation:

Get element, create object ... Don't repeat it here.

Canvas draws a circle using the draw path and fills the Beginpath () method to begin drawing the path

Closepath () method to end the drawing path

The arc () method is used to draw a circle, which accepts 6 parameters, namely

Describe the coordinates of the circle X, y

Radius radius of the circle

The starting and ending angles, expressed in radians, draw a complete circle from 0 to 2π (360 degrees)

Whether to draw anticlockwise by counter-clockwise

Knowing this, plus the knowledge learned above, you can draw all kinds of circles we want.

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/73/3B/wKioL1X4HMWwHlRxAACZg5Dwhtw620.jpg "title=" Qq20150915211236.png "alt=" Wkiol1x4hmwwhlrxaaczg5dwhtw620.jpg "/>

Modifying the parameters of Arc (), we can get the shape, and now, let's look specifically at the mechanism of canvas drawing a circle

As shown, after setting a certain drawing angle for the path, turn off the road strength and fill the circle with a cut.

The image of the line is based on the trajectory generated by the point movement, and the circle image is based on the trajectory of the line (path) movement,

A triangle that automatically generates a connection start and end path when the path is finally closed

To create a fan, you can set the start point of a drawing object to a circle by using the MoveTo () method before you draw the circle.

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/73/3B/wKioL1X4IOWThM0IAACYVBTGZh8300.jpg "title=" Qq20150915213250.png "alt=" Wkiol1x4iowthm0iaacyvbtgzh8300.jpg "/>

Generate 3 circular codes on the right:

Oround2.beginpath ();

Oround2.moveto (300,100);

Oround2.arc (300,100,66,math.pi* ( -1/2), math.pi*2,true);

Oround2.closepath ();

Oround2.fill ();

Oround3.beginpath ();

Oround3.moveto (500,100);

Oround3.arc (500,100,66,0, math.pi*0.5,true);

Oround3.closepath ();

Oround3.fill ();

Oround4.beginpath ();

Oround4.moveto (700,100);

Oround4.arc (700,100,66,math.pi*0.25, math.pi*2,true);

Oround4.closepath ();

Oround4.fill ();

4. Empty the canvas

Use the Clearrect () method of the drawing object to clear the canvas

Clearrect accepts 4 parameters that describe the coordinates of the cleared area

5. Draw Bezier Curves

Use canvas to depict two Bezier curves:

Context.quadraticcurveto (Cp1x,cp1y,x,y);

CP1X,CP1Y is the coordinates of the control point x, Y is the end coordinate

Draw a control point at (430,160) of the two Bezier curve:

var curve = document.getElementById ("PrintCurveCanvas2");

var ocurve = Curve.getcontext ("2d");

Ocurve.strokestyle= "#FF0000";

Ocurve.moveto (0,400);

Ocurve.quadraticcurveto (460,130,600,400);

Ocurve.stroke ();

Code Explanation:

MoveTo () method set curve starting point is (0,400)

Quardraticcurve () method to draw a curve with a finish of (600,400)

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/73/3C/wKioL1X4K1KRA_iLAAB-WJ1pReE807.jpg "title=" Qq20150915221714.png "alt=" Wkiol1x4k1kra_ilaab-wj1pree807.jpg "/>

Draw a Bezier curve of three times

Beziercurveto (Cp1x,cp1y,cp2x,cp2y,x,y)

Three Bezier curves have 2 control points

Draw a control point on the basis of (200,200) and (600,200), starting position in (200,0),

Two-time Bezier curve at end position (600,0)

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/73/3F/wKiom1X4K0SjlvWcAACqUWQsyzc473.jpg "title=" Qq20150915222506.png "alt=" Wkiom1x4k0sjlvwcaacquwqsyzc473.jpg "/>

The above content for my study notes, if there are errors, ask the great God pointed out, I am grateful.

This article is from the "Wanghaz Learning" blog, so be sure to keep this source http://10703847.blog.51cto.com/10693847/1695137

"HTML" "learning" 2, canvas Learning notes "on"