HTML5 CANVAS Basics

I. Basic plotting first, define the 2D rendering variable ct (Jquery library is used here): var ct =$ (# canvasId ). get (0 ). getContext ('2d '); The following is a method to draw a variety of basic graphics: copy the code // draw a rectangle (fill/draw a box) ct. fillRect (x, y, w, h) ct. strokeRect (x, y, w, h) // draw the path-line ct. beginPath (); ct. moveTo (x0, y0); ct. lineTo (x1, y1); ct. closePath (); ct. stroke (); // draw the path-arc ct. beginPath (); ct. arc (x, y, r, start, end, true); ct. closePath (); ct. fill (); // draw a text ct. font = "30px serif... "; ct. fillText (txt, x, y); ct. strokeText (txt, x, y); // sets the style ct. fillStyle = "rgb (r, g, B)"; ct. strokeStyle = "rgb ()"; ct. lineWidth = 5; Copying code also provides some flexible methods: // eraser (erase the rectangular range) ct. clearRect (x, y, w, h); // reset the style canvas. attr ("width", w); 2. Advanced features the following are some conversion operations on the canvas: copy the code ct. save ()/restore () // save/restore ct. translate (x, y) // translate ct. scale (a, B) // zoom in and out ct. rotate (Math. PI) // rotate around (0, 0) // transform matrix ct. transform (xScale, ySkew, xSkew, yScale, xTrans, yTrans) ct. setTransform (xScale, ySkew, xSkew, yScale, xTrans, yTrans) // reset the copy Code. There is a good article on transformation matrix to help you better understand it: http://shawphy.com/2011/01/transformation-matrix-in-front-end.html This is a common operation: copy the code ct. globalAlpha = 0.5 // transparency // shadow ct. shadowBlur = 20; // diffusion ct. shadowOffsetX = 10; ct. shadowOffsetY = 10; ct. shadowColor = rgba; // gradient (Linear/radioactive) ct. createLinearGradient (x, y, x1, y1) ct. createRadialGradient (x, y, r, x1, y1, r1) // sets the gradient's always-color addColorStop (0, "rgb ()")/(1, "rgb () "); copy the code to draw the beiser curve: // The last two parameters are the coordinates of the end point ct. beginPath (); ct. moveTo (50,250); ct. quadraticCurveTo (250,100,450,250) // two besell curve ct. bezierCurveTo (150,50, 35 0,450,450,250) // cubic besell curve ct. stroke (); export the canvas as an image: // The src address of the generated image var imgURL = canvas. get (0 ). toDataURL (); // Replace the canvas with the image var img =$ (" </img>"); img. attr ("src", imgURL); canvas. replaceWith (img); III. Introduction and adjustment of Image processing images (the conversion of images is the conversion of canvases, not introduced): // introduce Image var img = new Image (); img. src = ". jpg "; $ (img ). load (function () {ct. drawImage (parameter) ;}) // adjust the ct image. drawImage (image, x, y, w, h) // crop and adjust the image. dx/dy/dw/dy is the cropping parameter ct. drawImage (image, dx, dy, dw, Dh, x, y, w, h) Copy code advanced processing (for image pixel rendering and processing, only for understanding): // imgData object var imgData = ct. getImageData (x, y, w, h) // obtain the attributes of the imgData object. width/height // width and height imgData. data // array of pixel sets, indicating rgba // create an image var imgData = ct. createImageData (w, h) ct. putImageData (imgData, x, y) is a summary of the basic knowledge points, not too detailed, just for clarity and easy to query and memo, if not very clear about which point, you can completely copy the keyword google. At this point, the basic knowledge has been summarized, but the above is just the basic static canvas creation. If you know how to use javascript flexibly and combine canvas, you can create beautiful animations or games. There are already a lot of these applications. If you are interested, you can find relevant information on your own, but first you have to learn js.