Basic concepts and plotting of canvas in HTML5, html5canvas

Basic concepts and plotting of canvas in HTML5, html5canvas

* Canvas)
* Basic Content
* In short, HTML5 provides a new element <canvas>
* Canvas provides the Canvas function on the HTML page.
* Draw various images in the canvas
* The image drawn by Canvas is irrelevant to the HTML page.
* The DOM cannot be used to retrieve the drawn image.
* DOM events cannot be bound to the drawing.
* Only APIs provided by Canvas can be used.
* Canvas Purpose
* Draw charts (such as bar charts and pie charts) on the HTML page)
* Web game-Flash technology
* Use Canvas in HTML5
* How to Use Canvas
* Define the <canvas> element on the HTML page
* In javascript code
* Obtain the <canvas> element
* Create a canvas object
* GetContext ('2d ') Method
* Use the APIS provided by Canvas
* Drawing Images
* Draw a rectangle
* FillRect (x, y, width, height)-solid rectangle
* X and y-coordinate values in the upper left corner of the rectangle
* Width-set the width of the rectangle
* Height-set the height of the comet.
* StrokeRect (x, y, width, height)-hollow rectangle
* ClearRect (x, y, width, height)
* Clear the rectangle of the specified area
* Set the color.
* FillStyle-set the fill color
* StrokeStyle-set stroke color
* GlobalAlpha-set transparency (0-1)
* Set gradient
* Linear gradient-createLinearGradient (x1, y1, x2, y2)
* Baseline-start point (x1, y1) and end point (x2, y2)
* Sector (Ray) gradient-createRadialGradient (x1, y1, r1, x2, y2, r2)
* Cylindrical (conical)-area of two circles
* Parameters
* X1 and y1-coordinates of the center of the first circle
* R1-radius of the first circle
* X 2 and y2-coordinates of the center of the second circle
* R2-radius of the second circle