About HTML5 entry to mastery: HTML5 Canvas

The canvas element is used to draw a graphic on a Web page.

What is Canvas?

The canvas element of HTML 5 uses http://www.aliyun.com/zixun/aggregation/33906.html ">javascript to draw an image on a Web page.

The canvas is a rectangular area in which you can control each pixel.

Canvas has several ways to draw paths, rectangles, circles, characters, and add images.

Creating Canvas Elements

Add the canvas element to the HTML 5 page.

Specify the ID, width, and height of the element:

<canvas id= "MyCanvas" width= "height=" ></canvas>

Using JavaScript to draw

The canvas element itself is not capable of drawing. All drawing work must be done within JavaScript:

<script type= "Text/javascript" >
var C=document.getelementbyid ("MyCanvas");
var Cxt=c.getcontext ("2d");
Cxt.fillstyle= "#FF0000";
Cxt.fillrect (0,0,150,75);
</script>

JavaScript uses IDs to find canvas elements:

var C=document.getelementbyid ("MyCanvas");

Then, create the context object:

var Cxt=c.getcontext ("2d");

The GetContext ("2d") object is a built-in HTML 5 object that has several ways to draw paths, rectangles, circles, characters, and add images.

The following two lines of code draw a red rectangle:

Cxt.fillstyle= "#FF0000";
Cxt.fillrect (0,0,150,75);

The FillStyle method dyes it red and the FillRect method sets the shape, position, and size.