HTML5 the canvas of practical articles

Canvas itself does not have any ability to draw, all the drawing work is done by JS. Usually we use getElementById to get the canvas to operate in JS (which means we have to set an ID for canvas):

<canvas id= "MyCanvas" ></canvas><script>var C = document.getElementById ("MyCanvas"); Gets the code for the canvas//action canvas that you want to manipulate ...</script>

Note It is best to set its width to canvas at the outset (if not set wide, the browser will default to the canvas size of 300, 100 pixels high), and cannot be set using CSS (will be stretched), it is recommended to write directly inside the canvas label:

<canvas id= "Canvas" width= "height=" ></canvas>

You can also set it in the JS script:

<script>var C = document.getElementById ("MyCanvas");c.width=200;c.height=200;</script>

One thing you need to know about canvas size is that all of the drawing operations we've done with canvas are not visible beyond this size range. As the name implies, you can think of canvas as a canvas, the size of which we set the width of the high, then no matter how you draw, outside the canvas is naturally not painted

So, let's talk about canvas drawing some way.

1,.getcontext () accepts only one parameter, which is used to get the canvas's drawing environment, such as. GetContext ("2d"), which indicates that the canvas's drawing environment is a 2D plane (text, lines, arcs, rectangles, circles, and so on) can be drawn. The current H5 only supports 2D environments and will open 3D drawing capabilities in the near future. (So we can translate "getcontext" into "get the drawing Environment")

<script>var C = document.getElementById ("MyCanvas"); var ctx = C.getcontext ("2d"); Gets the 2D drawing environment object for the canvas Ctx.moveto (10,10);   Defines where the painting begins Ctx.lineto (150,10);  Draw a straight line, the end point coordinate is x=150,y=50ctx.stroke ();  Strokes </script>

2, MoveTo (x-coordinate, y-coordinate) can be interpreted as positioning the brush's position on the canvas (note that the coordinates defined by all drawing methods are relative to the canvas rather than the browser window, and for canvas, the coordinates of the point at the top left corner are (0,0))

3,lineto (x-coordinate, y-coordinate) as the name implies, is to draw a straight line to a point, very good understanding. What you need to know is that this method only does the path movement, and there is no visual drawing effect (coloring, stroke)

4,stroke () Stroke method, have played AfterEffect friends will be very clear, do not give the motion path and stroke effect of the painting is no stroke, canvas is the same, want to move path trajectory can have visual effects, need to use the corresponding Color/stroke method

5,beginpath () Isolate the effect of the path drawing to prevent previous effects from being contaminated.

6,strokestyle defines the stroke color, which has three types of values

Ctx.strokestyle=color|gradient|pattern;  That supports the assignment of color/gradient/pattern brushes

(1), the color assignment is the same as our regular CSS assignment

(2) Gradient gradient, this is slightly more complex

var grd = ctx.createlineargradient (0,0,170,0);  Defines a linear gradient object, sets the start and end coordinates of the gradient line, coordinates in the format (starting point x, starting point y, end point x, end point y) grd.addcolorstop (0, "Black");   Defines the gradient line start color grd.addcolorstop (0.5, "red");   Defines the color of the middle point of the gradient line grd.addcolorstop (1, "yellow");  Defines the color of the end point of the gradient line ctx.strokestyle = GRD;   Assigns a Gradient object to Strokestylectx.stroke ();  Strokes

Here refers to a concept called "gradient line", a friend who has not played a design needs to understand the knowledge point of the gradient, we can put lineargradient (linear gradient , another radial/circular gradient radialgradient ) as a rectangle (you can use Illustator, Photoshop and other professional design software to help you understand this):

The code for defining a linear gradient object at the beginning var grd = ctx.createlineargradient (0,0,170,0) is simply the set linear gradient line starting point is (0,0), the end point is (170,0).

The gradient values are set by Addcolorstop (<0~1> color) of the ramp line, with black, red, and yellow in the gradient line 0, 0.5, and 1 respectively.

The gradient is assigned to the stroke method by Ctx.strokestyle = GRD, and the resulting stroke has the desired gradient effect.

⑶ finally look at pattern strokes, Strokestyle is not called strokecolor because it supports pattern strokes in addition to color strokes (a friend who makes a design may be called a stroke stroke more feel).

Linear gradient strokes need to be createlinergradient first (xstart,ystart,xend,yend), then setting a pattern stroke will naturally create a new Canvaspattern object first:

Createpattern (image, Repetitionstyle)

where parameters   image   represents a patterned object, typically through  document.createelement (' img ')   or  new image ()   Then define its SRC value to create the object.

<script>    var c = document.getElementById ("MyCanvas");    var ctx = C.getcontext ("2d");     pic = new Image ();   Create a Picture object, or pic = document.createelement (' img ')    pic.src = "http://images.cnblogs.com/cnblogs_com/vajoy/558870/o _5.jpg ";     Pic.onload = Patternfill;     Perform a drawing function when the picture is loaded    Patternfill () {     ///define the drawing function        var redtexture = Ctx.createpattern (pic, "repeat");           Ctx.strokestyle = redtexture;         Ctx.moveto (80,10);        Ctx.lineto (10,90);        Ctx.linewidth = 8;    Defines a segment with a thickness of 8 pixels        ctx.stroke ();    }    </script>

7,linewidth setting the thickness of a segment

The 8,linecap is the shape (line cap) that sets the end of the segment, and its value can be:

(1) Butt default, that is, the line ends are straight edges
(2) Round line ends are rounded caps
(3) Square adds square caps to line ends

9, LineJoin is the outer corner type at the junction of the set polyline, the value can be:

(1) miter default, Polyline junction is sharp angle

(2) Fillet at the junction of round Polyline

(3) Bevel polyline intersection is angled

10,

HTML5 the canvas of practical articles