Canvas drawing realization :
<Canvas> element is responsible for setting an area on the page, the graphics rendering in this region by JS dynamically.
IE9 +, Firefox1.5 +, Safari2 + , Opera9 +, Chrome, IOS version for Android WebKit and Safari all support <canvas> element to a certain extent.
1, the basic usage
(1) HTML code portion
. 1 / * width and height attributes to specify the size of the drawing area * / 2 < Canvas ID = "Picture" width = "200 is" height = "200 is" > . 3 / * contents between the labels do not support the browser < Canvas > display element * / . 4 A Picture About Apple. . 5 </ Canvas >
<Canvas> element corresponding DOM elements have width and height properties, can be freely modified.
You can add style through CSS, if you do not add any style or does not draw any graphics on the page can not see that element.
(2) JS part of the code
. 1 var Picture = document.getElementById ( "Picture" ); 2 // determining browser supports <canvas> element . 3 IF (picture.getContext) { . 4 // acquired drawing context object . 5 var context = picture.getContext ( "2D" ); 6 // ...... 7 }
Image (3) deriving drawn on <canvas> element
. 1 var Picture = document.getElementById ( "Picture" ); 2 // determining browser supports <canvas> element . 3 IF (picture.getContext) { . 4 // acquired image data of the URL . 5 var imgUrl picture.toDataURL = ( "Image / PNG " ); . 6 // display image . 7 // the toDataURL method for receiving image MIME type format as parameters, any suitable context for creating the image . 8 var image = document.createElement (" IMG " ); . 9 's image.src = imgUrl; 10 document.body.appendChild (Image); . 11 }
By default, the browser will be encoded as a PNG image format (unless otherwise specified).
Firefox and Opera also support JPEG encoding format based on "image / jpeg" parameter.
NOTE: If the image on the canvas drawn from different domains, toDataURL () method throws an error.
2, fills and strokes
The method of using the 2D drawing context provider can draw simple 2D graphics, such as rectangles, and arcuate path. 2D context coordinate of the upper left corner starts at <canvas> element, the origin coordinates (0, 0). All the coordinate value calculated based on the origin, x value further to the right, the more the greater the value on the y.
Fill: (color, gradient, or image) is filled with the pattern specified style.
Stroke: just draw a line in the graph edge.
Results fill and stroke operation depends on two properties: the fillStyle and the strokeStyle . Value of the property may be a string, gradient and pattern objects object, the default value is "# 000000." When you specify a string representing the value of the color, you can use any format specified in CSS color values: the color name, Hex, rgb, rgba, hsl and hsla.
. 1 var Picture = document.getElementById ( "Picture" ); 2 // determining browser supports <canvas> element . 3 IF (picture.getContext) { . 4 // acquired drawing context object . 5 var context = picture.getContext ( "2D" ); . 6 context.strokeStyle = "red"; // side is red . 7 context.fillStyle = "# 0000FF"; // fill color to blue 8 }
3. Draw a rectangle
Is the only rectangle can be drawn directly in the context of the 2D shape.
Draw a rectangle related methods:
the fillRect () : rectangle drawn on the canvas will be filled with a specified color, the color specified by the attribute fillStyle;
the strokeRect () : rectangle drawn on the canvas, the color specified by the attribute with the specified color strokeStyle stroke;
the clearRect () : clear rectangular region on the canvas, the area of a rectangle drawn context becomes transparent.
The method receives three or more four parameters (in pixels):
X-coordinate of the rectangle;
rectangular coordinate y;
width of the rectangle;
height of the rectangle.
. 1 var Picture = document.getElementById ( "Picture" ); 2 // determining browser supports <canvas> element . 3 IF (picture.getContext) { . 4 // acquired drawing context object . 5 var context = picture.getContext ( "2D" ); . 6 . 7 // draw a red rectangle, pink stroke, from the coordinates (10, 10) begin drawing, width and height of 50 pixels . 8 context.fillStyle = "# FF0000" ; . 9 context.strokeStyle = "pink" ; 10 context.fillRect (10, 10, 50, 50 ); . 11 12 is // blue rectangle drawn translucent, yellow strokes, the first drawing a rectangle above the second rectangle 13 = context.fillStyle "RGBA (0,0,255,0.5)" ; 14 context.strokeStyle = "# 00FF00" ; 15 context.fillRect (30, 30, 50, 50 ); 16 . 17 // in two overlapping rectangles where Clear a small rectangle, becomes transparent 18 is context.clearRect (40, 40, 10, 10 ); . 19 }
Set the properties related to stroke:
lineWidth properties: the width of the stroke control line, may be any integer.
lineCap properties: controlling the shape of the line end is a flat, round or square head ( "butt", "round" or "square").
lineJoin properties: the control lines intersecting cross way round, oblique or miter ( "round", "bevel" or "miter").