Home > Developer > Web Develop
<canvas> tag is a new tag in HTML 5, like all DOM objects it has its own properties, methods and events, including the method of drawing, JS can call it to draw, and recently studied the HTML5 and CSS3 authoritative guide Here are some of the most fun canvas to learn to do the reading notes and experiments. Warm tip: Please use the latest version of opera, Firefox, for all the following experiments.
Defined:
<canvas> tags define graphs, tables and other images.
<canvas> tags are just graphics containers, and you must use scripting (JavaScript) to draw graphics.
Instance
How to display a red rectangle with a canvas element:
1 <!DOCTYPE HTML>2 <HTML>3 <Body>4 <CanvasID= "MyCanvas">Your browser does not support canvas tagging!</Canvas>5 <Scripttype= "Text/javascript">6 varCanvas=document.getElementById ('MyCanvas');7 varCTX=Canvas.getcontext ('2d');8 Ctx.fillstyle='#FF0000';9 Ctx.fillrect (0,0, the, -);Ten </Script> One </Body> A </HTML>
History of <canvas>:
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. See also: http://excanvas.sourceforge.net/.
<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. See also: http://www.whatwg.org/specs/web-apps/current-work/
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.
How to use <canvas> to mark a drawing:
Most canvas drawing APIs are not defined on the <canvas> element itself, but rather on a "drawing environment" object obtained through the GetContext () method of the canvas.
The Canvas API also uses the notation of the path. However, the path is defined by a series of methods, rather than strings that are described as letters and numbers, such as calls to the Beginpath () and Arc () methods.
Once a path has been defined, other methods, such as fill (), are operations on this path. Various properties of the drawing environment, such as FillStyle, illustrate how these operations are used.
Note: The Canvas API is very compact for one reason 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 overwrite the HTML text with CSS positioning above <canvas>.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
