Enter HTML5 entry to proficient:<canvas> label

<canvas> Label

Definitions and usage

<canvas> tags define graphics, such as charts and other images.

Instance

How to display a red rectangle with the canvas element:

<canvas id= "MyCanvas" ></canvas>
<script type= "Text/javascript" >
var Canvas=document.getelementbyid (' MyCanvas ');
var ctx=canvas.gethttp://www.aliyun.com/zixun/aggregation/16455.html ">context" (' 2d ');
ctx.fillstyle= ' #FF0000 ';
Ctx.fillrect (0,0,80,100);
</script>

Tiy

Differences between HTML 4.01 and HTML 5

The <canvas> label is a new label in HTML 5.

History of <canvas>

This HTML element is designed for client-side vector graphics. It has no behavior of its own, but presents a drawing API to client JavaScript so that the script can draw what 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.

Firefox 1.5 and Opera 9 all follow Safari's lead. Both browsers support <canvas> tags.

We can even use <canvas> tag in IE, and build a compatible canvas with open source JavaScript code (sponsored by Google) based on IE's VML support. See also: http://excanvas.sourceforge.net/.

<canvas> 's standardization effort is being advanced by an informal association of WEB browser vendors, and currently <canvas> has become an official label in the HTML 5 draft. See Differences between:http://www.whatwg.org/specs/web-apps/current-work/<canvas> markup and SVG and VML <canvas> markup and SVG as well as VML An important difference is that,<canvas> has a JavaScript-based drawing API, while SVG and VML use an XML document to describe the drawing.

The two methods are functionally equivalent, and any one can be emulated in another. On the surface, they are very different, but each has its strengths and weaknesses. For example, SVG drawings are easy to edit, as long as you remove elements from their descriptions.

To remove an element from a <canvas> tag in the same shape, you often need to repaint it by erasing the drawing.

How to use the <canvas> markup drawing

Most Canvas drawing APIs are not defined on the <canvas> element itself, but are defined on a "drawing environment" object obtained from the GetContext () method of the canvas.

The Canvas API also uses the representation of the path. However, the path is defined by a series of method calls, rather than a string of letters and numbers, such as calling Beginpath () and the Arc () method.

Once the path is defined, other methods, such as fill (), are all actions on this path. Various properties of the drawing environment, such as FillStyle, illustrate how these operations are used.

Note: One reason the Canvas API is very compact is that it does not provide any support for drawing text. To add text to a <canvas> graphic, you must either draw it yourself and merge it with a bitmap image, or use CSS positioning above <canvas> to overwrite the HTML text.

Property

The

Standard properties

<canvas> tags support standard properties in HTML 5.

Event Properties

<canvas> tags support event properties in HTML 5.

See

HTML DOM Canvas Object