Canvas plotting of HTML5_03, html5_03canvas

Canvas plotting of HTML5_03, html5_03canvas

1. Canvas plotting -- JS plotting:
<Canvas id = 'c1 'width = ''height = ''> </canvas>
* The Canvas size cannot be set with CSS;
C1.height =;
C1.width =;
Var ctx = c1.getContext ('2d ');
Common attributes:
Ctx. fillStyle = '# f00'/gradient;
Ctx. strokeStyle = '# 00f'/gradient;
Ctx. lineWidth =;
Ctx. font = 'px sans-sarfi ';
Ctx. textBaseline = 'alphabetic ';
Ctx. shadowBlur = '';
Common Methods:
Draw a rectangle:
Ctx. fillRect ();
Ctx. strokeRect ();
Ctx. clearRect ();
Draw text:
Ctx. fillText ();
Ctx. strokeText ();
Ctx. measureText (txt). width;
2. Canvas plotting -- drawing path:
Purpose: ① create a selection area (clip) and crop the canvas content;
② Draw a line in any shape by stroke;
③ Fill (fill) and fill any image in the desired shape;
Related functions:
Ctx. beginPath (); -- start a new path
Ctx. arc (); -- draw an elliptical/arc/circular path
Ctx. moveTo (x, y); -- move to a specified point
Ctx. lineTo (x, y); -- draw a straight line from the previous point to the specified point
Ctx. busierCurve (); -- plot the besell Curve
Ctx. closePath (); -- Closed Path
Ctx. clip (); -- crop based on the current path
Ctx. stroke (); -- stroke based on the current path
Ctx. fill (); -- fill based on the current path
3. Canvas plotting-drawing an image:
① The Image Positioning point is located in the upper left corner of the current user;
② Draw:
Ctx. drawImage (img, x, y); // draw the original size
Ctx. drawImage (img, x, y, w, h); // use the specified width and height to draw an image-resize the image
③ When drawing an image, you must wait until the image is asynchronously loaded:
Var img = new Image ();
Img. src = "xx.png"; // asynchronously requests an image from the server
Img. onload = function (){
Ctx. drawImage (img, x, y, [w], [h]);
}
④ Image rotation:
Ctx. totate (deg );
⑤ Rotation axis point-default coordinate axis origin. If you rotate at a fixed point, you must translate the coordinate origin of the canvas:
Ctx. translate (x, y );
4. Canvas-based chart rendering framework/tool Library:
① Chart. js -- free open source, nine types of charts
② Echart. js -- free, provided by Baidu, Chinese manual
③ FusionChart. js-billing, powerful functions