Html5 canvas Basic Features

1. Use of jquery (jquery operations on the dom Model)

<---! Css code snippet --->

<script src="jqurey.js" type="text/javascript"></script>

<Script type = "text/javascript">
$ (Document). Ready (function () {// $ is short for jquery
// JS Code segment
});
</SCRIPT>

2. Use jquery to obtain the Canvas Element

...
var canvas=$(#canvasid);
var context=canvas.get(0).getContext("2d");
...


3. Canvas-based Built-in methods:

Fill area: fillRect (x, y, width, height );
Border: strokeRect (x, y, width, height );
Path: beginPath ();
.....
ClosePath ();
StrokeRect (....);
Straight line: moveTo (x, y );
LineTo (x, y );
Circle: arc (x, y, r, begindegree, enddegree, true/false );
Fill image text: fillText (text, x, y );
Clear area: clearRect (x, y, width, height );
Style Change:
LineWidth = number;
Font = "italic 30px serif"
Fill style: fillStyle = "rgb (255,255,255 )"
Stroke style: strokeStyle = "rgb (255,255,255 )"
Full Screen black brush tips:
Canvas. attr ("width", $ (window). get (0). innerWidth );
Canvas. ATTR ("height", $ (window). Get (0). innerheight );
Context. fillrect (0, 0, canvas. Width (), canvas. Height ());

4. advanced features of canvas
Note that the following features (deformation) are for the entire canvas

Save the drawing status: Save (); // Add the drawing status to the stack
Restore drawing status: Restore ();
Source translation: translate (x, y );
Scale: Scale (x, y );
Rotation: Rotate (radian value );
Transformation Matrix: Transform (A, B, C, D, E, F );

A c e --> Coordinate Transformation Matrix
B D f
0 0 1

Global Alpha value (transparency): globalalpha = 0.0 ~ 1.0
Global Image merging item: globalcompositeoperation = ""
-- Stack the source/target on the upper layer: source/destination-over
-- Display the overlapping parts of the source/target, and the non-overlapping parts of the source/target are transparent: source/destination-atop
-- The Source/target only displays the source/target of the intersection, while the other parts are transparent: source/destination-in
-- The Source/target is transparent only when its intersection is displayed. The other parts of the source/target are displayed: source/destination-out.
-- Add the RGB values at the intersection of the source and target: lighter
-- Only draw the source, overwrite the target: Copy
-- Exclusive or: XOR
Shadow:
Shadowcolor = "RGB (x, x, x )"
ShadowBlur = pixel value (fuzzy shadow)
ShadowOffsetX = pixel value (top offset of the Shadow X axis)
ShadowOffsetY = pixel value (on the Y axis of the Shadow)
Gradient:
-- Linear gradient:

VaR gradient = context. createlineargradient (start X coordinate, start y coordinate, end X coordinate, end y coordinate );
Gradient. addcolorstop (0, "RGB (x, x, x)"); // start color
Gradent. addcolorstop (1, "RGB (x, x, x)"); // end color
Context. fillstyle = gradient;
Radiation gradient:
Var gradient = context. createRadialGradient (x0, y0, r0, x1, y1, r1); // 0 indicates the starting circle, and 1 indicates the ending circle.
... // For the color ending point of the starting point, see linear gradient.
If the start and end circles are concentric circles, the concentric radiation effect can be achieved. (CanvasCentreX, canvasCentreY can be the center of the canvas instance ).

Complex path:
Polygon:
context.beginPath();
context.moveTo(x0,y0);
context.lineTo(x1,y1);
context.lineTo(x2,y2);
....
context.closePath();
Besell curve:
Twice:context.beginPath();
context.moveTo(x,y);
context.quadraticCurveTo(x,y,cpx,cpy);
context.stroke();
Three times: context. bezierCurveTo (x, y, cpx1, cpy1, cpx2, cpy2 );
Export the canvas images of chorm and ie:
Var dataURL = canvas. get (0). toDataURL ();
Var img = $ (""); // use jQuery to create an element
Img. attr ("src", dataURL); // jQuery's element settings
Canvas. replaceWith (img); // Replace the built-in replacement method of the canvas object...