Getting started explaining HTML5 's canvas features (1)

Personally, the canvas function in HTML5 is not practical, of course, the trend is in the case of flash does not decline. Through learning I found that the canvas function can achieve something very emotional, but the front-end staff must have a certain aesthetic and ideas to make interesting things, because the canvas can provide too few things.

Of course, under the premise that Apple resists flash, the foreground of Flash is not bright, which also gives us the front-end personnel more burdens and opportunities. Because in this piece of UI there is no familiarity with our HTML5. Here is a summary of my study after HTML5.

First part

First of all, although the HTML5 of the content, but because the canvas itself is not drawing capabilities, so all our drawing work is done in Java scrip. (Big Liar!!!) Your first step is to create a canvas in the body, with a CSS style that specifies a wide height and, of course, a better view if you can center it. The specific code is as follows

<canvas id= "MyCanvas" width= "height=" ></canvas>
This is the equivalent of you in the current HTML document in a blank sheet of paper, you give the width of how much, this "piece" of how big.
Second part
Secondly, I have said before the canvas this label itself is not drawing ability, need to borrow Java scrip power. So the second step is to write the JS code. Here's a simple red rectangle for you to draw. The code is as follows

</script>
It is important to note that although Var has two objects, it still needs to be written in specification. Can not use a simple ABC to replace, as far as possible to see the name of understanding, convenient for later development and memory.

Getting started explaining HTML5 's canvas features (1)