HTML5 the role of canvas labels and the history of canvas labels

This article introduces you to the definition and usages of the HTML5 canvas label, as well as the focus on the HTML5 canvas label's history and the differences between SVG and VML, I hope you know more about the H5 aspects of the new tags, read the following to start reading this article

HTML5 the definition and usage of the canvas label:

<canvas> tags define graphs, tables and other images.

<canvas> tags are just graphics containers, and you must use scripts to draw graphics.

HTML5 <canvas> Tag Examples

How to display a red rectangle with a canvas element:

<canvas id= "MyCanvas" ></canvas><script type= "Text/javascript" >var canvas= document.getElementById (' MyCanvas '); var ctx=canvas.getcontext (' 2d '); ctx.fillstyle= ' #FF0000 '; Ctx.fillrect ( 0,0,80,100);</script>

HTML5 new Canvas tags and corresponding properties

Knowledge Description:

HTML5 New Canvas label, create a canvas, create any desired shape on the canvas, the following will be the canvas of the API and properties to do a collation, and attach the clock example, easy to review learning! fighting!

First, the prototype of HTML5 Canvas label:

<canvas width= "height=" id= "MyCanvas" > your browser version is too low to support HTML5 new canvas label. </canvas>

Use JS to get the canvas and specify the object

<script>var Canvasid = document.getElementById ("MyCanvas"); Var canvas = Canvasid.getcontext ("2d");</script>

Second, the Canvas label Common Properties:

Third, the canvas tag API integration:

HTML5 the role of canvas Tags:

HTML5 Canvas This thing in popular words is a piece of cloth to draw, but this is not ordinary cloth, this is a similar to God Pen Ma Liang's that God pen as magical things, can draw a lot of exquisite wonderful things. This article shows two canvas-based cool effects, allowing us to have a more intuitive understanding of the potential of canvas.

Personal feeling in the canvas has a very good space for development, can be expected if the country's speed without pressure to keep up, it is not questioned that this will be the world of HTML. Because in the canvas, his imagination infinite thought how far then his development space is how far, of course, the premise is that the technology to perfect, of course, is my imagination, but can not deny the powerful HTML, but the biggest problem is the compatibility of the problem, while the speed is a big limit,

As just touch HTML5 small white, made of canvas, he can make canvas color is different, at the same time, each refresh will be different, personal little fun, constantly refreshed feel like time and space tunnel, think or can dry change under, the effect should be good, not many say code as follows:

<! DOCTYPE html>
HTML5 the history of canvas Tags:

This HTML element is designed for client-side vector graphics. It does not act on its own, but presents a drawing API to client JavaScript so that the script can draw everything it wants to draw onto a canvas.

<canvas> tags are introduced by Apple in the Safari 1.3 Web browser. The reason for this fundamental extension of HTML is that HTML's ability to draw in Safari is also used by the Dashboard component of the Mac OS X desktop, and Apple wants a way to support scripted graphics in Dashboard.

Both Firefox 1.5 and Opera 9 follow the lead of Safari. Both browsers support the <canvas> tag.

We can even use the <canvas> tag in IE and build a compatible canvas with open source JavaScript code (initiated by Google) on the basis of the VML support of IE.

<canvas> 's standardized efforts by a Web browser vendor's informal association in advance, currently <canvas> has become a formal label in the HTML 5 draft.

Differences between <canvas> tags and SVG and VML

An important difference between <canvas> markup and SVG and VML is that,<canvas> has a JavaScript-based drawing API, while SVG and VML use an XML document to describe the drawing.

The two approaches are functionally equivalent, and any one can be modeled with another. On the surface, they are very different, but each has strengths and weaknesses. For example, SVG drawings are easy to edit, as long as the element is removed from its description.

To remove an element from a <canvas> tag in the same shape, you often need to erase the drawing and redraw it.

"Small series of related articles"

What is the var tag for HTML? A detailed description of the definition and usage of the Var tag

What does the HTML dir tag do? <dir> description of specific definitions and properties of tags