2013/6/10
Introduction to Canvas
A. Dream Technology QQ Communication Group: credream:251572072
-------------------------
The A.canvas element is one of the new elements of HTML5, used to draw a graphic on a Web page, which is equivalent to embedding in HTML
into a canvas, so that you can directly on the HTML graphics operation, so it has great application value.
The Canvas element itself is not capable of drawing, it needs to use JavaScript to implement the drawing function.
---------------------------------------------------------------------------
History of the B.canvas label
<canvas> tags are introduced by Apple in the Safari 1.3 Web browser. The reason for this extension of HTML
Is that the ability to draw HTML in Safari can also be used for 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 of which support <canvas> tags.
can use <canvas> tag in IE, and use open source JavaScript code based on IE's VML support
(sponsored by Google) to build a compatible canvas.
<canvas> standardization is being promoted by an informal association of WEB browser vendors. Current
<canvas> has become a formal label in the draft HTML5
--------------------------------------------------------
Definition and usage of C.canvas
With the canvas tag, just add the canvas element to the HTML5, and the code is as follows:
<canvas id= "MyCanvas" width= "height=" ></canvas>
------------------------------------------
D. Using canvas to draw
onload = function () {
Draw ();
};
function Draw () {
/* Use ID to find Canvas elements * *
var canvas = document.getElementById (' canvassample ');
/* Verify that the canvas element exists and that the browser supports the canvas element * *
if (! Canvas | |! canvas.getcontext) return false; /* Create context Object/*
var ctx = Canvas.getcontext (' 2d ');
/* Draw a red rectangle * *
Cxt.fillstyle= "#FF0000";//Use fi Llstyle method to set the brush color to red
Cxt.fillrect (0,0,150,75);
}
---------------------------------------
E. To use the canvas element, first of all, based on the ID or name, canvas the
Like out, the above code uses the getElementById method, if the canvas tag is added to the name
, you can also use Getelementbytagname to get the canvas object.
In addition, to use the canvas element, you must first determine whether the element exists and whether the browser used by the user
This element is supported. If you can't use the canvas element, then everything you do below is meaningless.
The code above, when using the GetContext method, passes a "2d" parameter, which is used to get the two-dimensional
The context object is used to depict two-dimensional graphics. Imagine if in the future canvas can draw three-dimensional graphics, perhaps
You can also use the "3d" parameter. However, you can only use "2d" as an argument at this time.
------------------------------------------------------------
F. In the example above, the FillStyle method is used to set the brush color to red. In addition, the FillRect method provides
The shape, position, and size of the graphic.
--------------------------------------------
Restrictions on G.canvas
With canvas, you can have several ways to draw paths, rectangles, circles, characters, and add images. But the drawn
The graphic is still, and if you want the drawing to move, you need to draw the graph of each frame and then connect it.
Although canvas can perform a series of operations on graphics, there are some problems with efficiency and popularization,
Some of the relatively complex graphics and animation, the current view, or flash more than a chip.
In addition, Canvas is a new property of the HTML5 that requires consideration of the user's browser and usage environment when used.
Canvas is currently just a two-dimensional canvas, if you want to achieve three-dimensional effect, you need to use a Third-party class library, such as
Three.js, or Papervision3d.
-------------------------------------------------
H. Support for browsers
The support for canvas by various mainstream browsers is shown in table 1-1.
Table 1-1 Browser support for canvas list
Whether the browser (version) supports canvas elements
ie8x
IE90
Firefox 3.60
Chrome 10.00
Safari 5.00
Opera 11.00
As you can see, there are still a lot of browsers that support canvas. But in IE browsers, there is only IE9 to
and later versions can use the HTML5 canvas label. If you use IE8 or a lower version of IE browser, you need to
To introduce the Open source class library Explorercanvas Google releases, the code looks like this:
<. --[If Ie]><script src= "Excanvas.js" ></script><! [endif]-->
Explorercanvas's download address is: Http://code.google.com/p/explorercanvas/downloads/list.
Also need to note that the lower version of IE browser, although the introduction of open source Class library Explorercanvas can use canvas,
However, there are many limitations on functionality, such as the inability to use the fi Lltext method.
--------------------------------------------------------
2013/6/11
04.HTML5 development environment.
A. Dream Technology QQ Communication Group: credream:251572072
I. Prepare a local server
For a Mac, it has a server of its own, but for other systems you can use the XAMPP
(Apache +mysql+php+perl) He is a powerful server development system
Support for Windows,linux,solaris system installation. Multi-language support
-------------------------------------------
J.XAMPP's official website is: http://www.apachefriends.org
After downloading the installation, open the Xampp folder and start Xampp-control.exe, click on the Start button on the right of Apache to start Apache
Makes Apache a running state. Placing the user's files or projects under the Htdocs folder under the XAMPP installation folder can be
Accessed using the localhost/filename.
-----------------------------------------
K. In addition, to enable JavaScript development to have a better hint function, you need to install eclipse.
Install HTML5 Development Support environment for eclipse:
1. In Eclipse, open the Help select-->install new software option.
2. Fill in the work with option in the pop-up window: Http://download.aptana.com/studio3/plugin
3. Click the Add button to install the Aptana Studio 3 interface and restart Eclipse after installation.
After you restart Eclipse, click the File menu in the upper-left corner of Eclipse, and then click New→web
Project, create a new Web project
------------------------------------
4. Then in the new from Template menu, click Html→html5 Template, and then create a new
HTML file
At this point, the whole preparation work is done.
-----------------------------------------------
L. Test and upload Code
When uploading the project code, you need to include all the HTML, graphics, and JavaScript files in the project
To the server and ensure that the file structure is unchanged.
Create a sample1.5.1 project, create a new index.html file in the project
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title>templates</title>
<body>
<div>
<nav>
<p>hellow world</p>
</nav>
<footer>
<p>© Copyright by lufy</p>
</footer>
</div>
</body>
--------------------------------------------------
