The following notes to study this book do the following figure, unoriginal. Notes mainly to practice it and see the results deepen our memory.
Use <canvas> tag creates a canvas in a Web page
canvas tag attributes are as follows:
id: canvas used to identify
width: set the width of the canvas
height: Set the height of the canvas
Default is 300 pixels wide and 150 pixels high.
Example:
1 <canvas id="myCanvas" width="200" height="100"></canvas>
① use CSS to control the appearance of canvas. Using the style attribute to add a solid border for the canvas element.
Statement:
1 <canvas id="myCanvas" style="border: 1px solid;" width="200" height="100"></canvas>
Page performance:
② add a <canvas> tag in HTML5 page, set the id attribute of the canvas in order to call JS
Statement:
1 <! - The first step: page Add H5 <canvas> tag, id attribute is set to the value of the canvas JavaScript calls -> 2 < canvas id = "myCanvas" style = "border: Solid 1px;" width = " 200 is " height =" 100 " > </ canvas > . 3 < Script > . 4 // Step 2: use document.getElementById () method in the JavaScript, the acquisition of the canvas rEFERENCE ID canvas element . 5 var C = Document. getElementById ( " myCanvas " ); 6 //The third step: the canvas element through the getContext () method to get the canvas context (context), creating the context object, allowing for 2D drawing environment . 7 var context = c.getContext ( " 2D " ); . 8 // fourth step : drawn using JavaScript . 9 context.fillStyle = ' # FF00FF ' ; 10 context.fillRect ( 50 , 25 , 100 , 50 ); . 11 </ Script >
Page performance:
In the canvas, the canvas coordinate origin is the top left corner of the canvas, x-axis extends horizontally to the right, y-axis extending vertically downwardly, the position of all elements are positioned relative to the origin.
