Canvas first-class: Drawing rectangles; canvas first-class: rectangle

Canvas first-class: Drawing rectangles; canvas first-class: rectangle
I. canvas Introduction

 <canvas>YesHTML5New, a script can be used (usuallyJavaScript)HTMLElement. It can be used to make a photo set or make a simple (or not that simple) animation, or even to process and render real-time videos.

It was initially used internally by AppleMacOS X WebKitLaunch, supply applications use components like dashboard andSafariBrowser. Later, someone passedGeckoKernel browsers (especiallyMozillaAndFirefox),OperaAndChromeThis element is recommended for the next generation of network technology.

 CanvasYesbyHTMLThe Code defines the printable area with the height and width attributes.JavaScriptCode can access this region, similar to other common two-dimensionalAPITo dynamically generate images using a complete set of drawing functions.

The Mozilla program starts to support Gecko 1.8 (Firefox 1.5 ).<canvas>, Internet Explorer starts from IE9<canvas>. Chrome and Opera 9 + are also supported<canvas>；

Ii. basic use of Canvas <canvas>Element

<canvas id="tutorial" width="300" height="300"></canvas>

 

 <canvas>Looks like andThe labels are the same,<canvas>There are only two optional attributeswidth、heigthAttribute, but notsrc、altAttribute.

If you do not give<canvas>Setwidht、heightAttribute, the default value iswidth300,heightIt is 150, and the Unit ispx. You can also usecssAttribute to set the width and height, but if the width and height attributes are inconsistent with the initial proportion, it will be distorted. Therefore, we recommend that you never usecssAttribute to set<canvas>.

Replace content

Some older browsers (especially those earlier than IE9) or browsers do not support HTML elements.<canvas>In these browsers, you should always be able to display alternative content.

Supported<canvas>The browser will only render<canvas>Label, while ignoring the alternative content. Not Supported<canvas>The browser will directly render the alternative content.

1. Replace with text

<Canvas> your browser does not support canvas. Please upgrade your browser </canvas>

2. Replace with img

<Canvas>  </canvas>

 

Thre Rending Context)

 <canvas>A fixed-size canvas will be created, one or more rendering contexts (paint brushes) will be exposed, and the content to be displayed will be drawn and processed using the rendering context.

We focus on 2D rendering context. We will not study other contexts for the moment. For example, WebGL uses a 3D context based on OpenGL ES ("experimental-webgl ").

Var canvas = document. getElementById ('utorial '); // obtain the 2d context object var ctx = canvas. getContext ('2d ');

 

2 detection support

var canvas = document.getElementById('tutorial');if (canvas.getContext){  var ctx = canvas.getContext('2d');  // drawing code here} else {  // canvas-unsupported code here}

Code Template

<! DOCTYPE html> 
 
 
4. Draw a rectangle
1. Draw a filled rectangle
1 fillRect(x, y, width, height) 
// Draw a rectangle ctx with a background color of rgb (, 0, 0), a source of 10, 30, a width of 55, and a height of 55. fillStyle = "rgb (200,0, 0)"; ctx. fillRect (10, 30, 55, 50 );
 
2. Draw the border of a rectangle
1 strockRect(x, y, width, height) 
// Draw a rectangular border ctx. strokeRect (9,149, 9,149,) with a width of 82 and a height );
 
 
3. Clear the specified rectangle
clearRect(x, y, widh, height)