HTML5 Canvas Elements

The canvas elements of HTML5 and the programming interfaces that accompany them are widely used in the canvas API. Simply put, a canvas element can create a rectangular area in a Web page that can be a canvas, which can draw various shapes. Do not underestimate this canvas, it can achieve unlimited possibilities. Let's start with the simplest part and get to know the powerful features of canvas.

1. Add a canvas element to the page:

By default, canvas creates a rectangular area that is 300 pixels wide and 150 pixels high, but we can use the width and Height properties to customize the width and height of the canvas.

Pixel concept: From the definition point of view, the pixel refers to the basic original pigment and its grayscale basic coding. Pixels are the basic units that make up a digital image, and typically represent the size of the image resolution in pixels per inch of ppi (pixels per inches).

For example: a JPG picture whose PPI (pixel per inch) pixel = 300 know the picture size can figure out how many pixels
ppi=300 means that there are 300 pixels per inch long 5cm 1inch about =2.54cm so 5cm= (1/2.54) inch wide 3.8cm 3.8cm=3.8/2.54 inch This photo is about 590.55 * 448.82 Megapixels

EX: Constructs a canvas with a width of 200 pixels, a height of 100 pixels, and sets a solid border:

<!doctype html>
2.Canvas how to draw a graphic:
1. To add a canvas element to the HTML5 page, you must define the ID property of the canvas element so that we can invoke it later.
<canvas id= "MyCanvas" style= "border:1px solid;" Width= "height=" [] ></canvas>//set canvas here The ID is MyCanvas    
2. Use the document.getElementById method in JavaScript code to find our canvas.
var Ctx=document.getelementbyid ("MyCanvas")//Find the canvas we created
3. Then we use the GetContext method to get the context of the canvas element, currently in the canvas support 2d mapping, so the GetContext parameter is 2d, perhaps in the future will support 3d after the plot, the parameters may be 3d.
var Context=c.getcontext ("2d");
4. Use JavaScript to draw. In the future we will be exposed to the following basic drawing methods:
context.fillstyle= "Red"//Set Fill Color
Context.fillrect (X1,Y1,X2,Y2)//Where x1,y1 is the upper-left coordinate of the rectangle, X2,y2 is the lower-right coordinate of the rectangle
Context.strokestyle= "Blue"//Set Dash color
Context.strokerect (X1,Y1,X2,Y2)//as described above
EX: Constructs a canvas with a width of 200 pixels and a height of 100 pixels, creating a rectangle with a fill color of #ff00ff in the canvas
<!doctype html>
HTML5 Canvas Elements