Canvas in the HTML5

What is canvas?

The canvas element is part of the HTML5, allowing the scripting language to render bit images dynamically. A canvas is defined by a property definition in a drawing region's HTML code to determine the height and width. JavaScript code can access the region and generate dynamic graphics with a complete set of drawing functions similar to other generic two-dimensional APIs.

We can do the following with canvas:

1. Game: There is no doubt that the game plays a pivotal role in the HTML5 field. HTML5 in Web-based image display more stereoscopic than flash, more sophisticated, using canvas-made images can make the HTML5 game in the smoothness and cross-platform to play a greater potential, in many nodes will not be very card.

2. Chart making: chart making is often overlooked, but it is inseparable from the chart, whether internal or intra-enterprise communication and cooperation. Now some developers use HTML/CSS to complete the icon making, or it can be done with canvas. Of course, using SVG (Scalable Vector graphics) for charting is also a great way to do it.

3. Banner advertising:Flash Once brilliant era, the smartphone has never appeared. Now and in the future of the Intelligent Machine era, HTML5 technology can play a huge role in banner advertising, using canvas to achieve dynamic advertising effect is more appropriate.

4. Remote computer control:Canvas allows developers to better implement web-based data transfer and build a perfect visual control interface.

5. Font design: custom rendering for fonts will be completely web-based and implemented using HTML5 technology.

6. Graphics Editor:Ohad Prediction, the graphics editor will be able to 100% Web-based implementations.

7. Other content that can be embedded in the site: similar to charts, audio, video, and many more elements to better integrate with the web, and do not require any plug-ins.

To draw a simple graphic:

The GetContext () method is used to return an environment object that exports a two-dimensional drawing API. You can understand that it returns an environment for drawing on the canvas. Its current only legal value is "2d".

The Beginpath () method starts a new collection of sub-paths in a canvas. Beginpath () discards any currently defined paths and begins a new path. It sets the current point to (0,0). When the environment of a canvas is created for the first time, the Beginpath () method is called explicitly.

The Closepath () method closes an open sub-path.
If the child path of the canvas is open, Closepath () closes it by adding a line to the current point and sub-path start point.
If the sub-path is closed, this method doesn't do anything.
Once the sub-path is closed, no more lines or curves can be added to it. To continue adding to the path, you need to start a new sub-path by calling the MoveTo () method.

void MoveTo (x, y);

Used to explicitly specify a starting point for a path. By default, the starting point of the first path is the (0, 0) point of the canvas, followed by the end of the previous path. Two parameters are divided into X-and y-coordinate values that represent the starting point.

void LineTo (x, y);

Used to depict a straight path from the starting point to a specified position, and the drawing start point will be moved to that specified position when the paint is finished. The parameter represents the X-, y-coordinate value of the specified position.

Draw a line by specifying where to start and where to end it:

<script type= "Text/javascript" >var C=document.getelementbyid ("MyCanvas"); var cxt=c.getcontext ("2d"); Cxt.moveto (10,10); Cxt.lineto (150,50); Cxt.lineto (10,50); Cxt.stroke (); </script>

There are three three types of pictures to draw:

DrawImage (image, DX, dy);

DrawImage (image, DX, DY,DW, DH);

DrawImage (image, SX, SY,SW, sh, dx, dy, DW, DH);

Shows the meaning of each parameter in the prototype:

Where the image parameter can be htmlimageelement, htmlcanvaselement, or htmlvideoelement. In the third method, the SX and Sy in the first two are all 0,SW and sh are the width and height of the image itself. The DW and DH in the second and third prototypes are also the width and height of the image itself.

<script type= "Text/javascript" >var C=document.getelementbyid ("MyCanvas"); var cxt=c.getcontext ("2d"); var img= New Image () img.src= "Flower.png" Cxt.drawimage (img,0,0);</script>
There are also some common graphics

void Rect (left, top,width, height);

A rectangle that depicts the vertex position of a known upper-left corner and a width and height, and the drawing start point of the context is moved to the upper-left vertex of the rectangle when it is finished. The parameters represent the x, y coordinates of the top-left vertex of the rectangle, and the width and height of the rectangle.

void Arc (x, Y, Radius,startangle, Endangle, anticlockwise);

Used to depict a circle with a (x, y) point, radius, radius, startangle as the starting Radian, and Endangle as the arc of the terminating arc. Anticlockwise is a Boolean parameter, True indicates counterclockwise, and False indicates clockwise. The two radians in the parameter are 0 for 0°, the position is at 3 o'clock, the Math.PI value is 180°, and the position is in 9 o'clock direction.

<script type= "Text/javascript" >
var C=document.getelementbyid ("MyCanvas");
var Ctx=c.getcontext ("2d");
Ctx.linewidth = 5;
Ctx.strokestyle = "Red";
Ctx.beginpath ();
Ctx.arc (100,100,70,0,130*math.pi/180,true);
Ctx.stroke ();
</script>

void Stro Ke ();

Used to draw lines according to an existing path.

void Fill ();

The area used to populate the path with the current fill style.

Strokestyle

The color of the line, default to #000000, whose value can be set to a CSS color value, a gradient object, or a modal object.

FillStyle

The color of the fill, which defaults to #000000, can also be set to a CSS color value, a gradient object, or a modal object, as with Strokestyle.

LineWidth

The width of the line, in pixels (px), which is 1.0 by default.

LineCap

The end style of the line, with Butt (none), round (round head), Square (square) three types to choose from, the default is butt.

Graphics warp

Pan context.translate (x, y)

X: The coordinate origin is shifted x to the x axis.

Y: The coordinate origin is shifted y to the y axis.

Scaling Context.scale (x, y)

X:x axes scaled by x scale

Y:y axes scaled by Y scale

Rotary context.rotate (angle)

Angle: Axis rotation x angle (angle change model and circle model)

HTML5 Canvas Snowflake Effect, the realization of the dynamic effect of snowflakes drifting down, random position, random number, and speed can be adjusted.

<! DOCTYPE html>
<title>canvas Snowflakes Floating </title>
<body>
<canvas id= "MC" width= "420" height= "280" style= "border:1px solid black" ></canvas>
<script type= "Text/javascript" >
function Createflower (context,n,dx,dy,size,length) {
Context.beginpath ();
Context.moveto (dx,dy+size);
var dig = 2*math.pi/n;
for (Var i=1;i<n+1;i++) {
var ctrlx = Math.sin ((i-0.5) *dig) *length+dx;
var ctrly = Math.Cos ((i-0.5) *dig) *length+dy;
var x = Math.sin (i*dig) *size+dx;
var y = Math.Cos (i*dig) *size+dy;
Context.quadraticcurveto (ctrlx,ctrly,x,y);//Draw curve
}
Context.closepath ();
}
Snowpos = [
{X:50,y:44,z:5},{x:140,y:35,z:3},
{X:360,y:20,z:1},{x:250,y:50,z:2},
{X:110,y:90,z:4},{x:310,y:85,z:2},
{X:65,y:160,z:5},{x:205,y:130,z:5},
{x:300,y:150,z:3},{x:260,y:210,z:1},
{X:375,y:215,z:3},{x:155,y:230,z:2},
{x:30,y:270,z:4},];
function Fall (context) {
Context.fillstyle = "#000";
Context.fillrect (0,0,420,280);
Context.fillstyle = "#fff";
for (Var i=0,len=snowpos.length;i<len;i++) {
Context.save ();
Context.translate (SNOWPOS[I].X,SNOWPOS[I].Y);//panning
Context.rotate ((Math.random () *6-3) *MATH.PI/10);//rotation
Snowpos[i].y + = Math.random () *18;
if (snowpos[i].y>280) {
snowpos[i].y=4;
}
Createflower (context,6,0,0,snowpos[i].z,8);
Context.fill ();
Context.restore ();
}
}
var canvas = document.getElementById ("MC");
var ctx = Canvas.getcontext ("2d");
SetInterval ("Fall (CTX);", 200);
</script>
</body>

Canvas in the HTML5