HTML5 uses canvas to draw a five-star red flag

Source: Internet
Author: User

In the HTML5 overview, we mentioned that html 5 has been crowned with many high hats. The highest and controversial one is the "Flash Killer ". The IT comments are familiar with this word, and the killer is everywhere. Whether it's a killer or not, some new features introduced by HTML 5 are really exciting. One of the most promising elements is the canvas Element.

As part of the HTML5 standard, the Canvas Element allows scripts to dynamically render dot matrix images. This HTML element is designed for vector graphics on the client side. It does not act on its own, but presents a drawing API to the client javascript so that the script can draw everything you want to draw on a canvas. HTML 5 canvas provides a JavaScript method for Drawing Images. This method is simple but powerful. Each canvas element has a "context" (as a page on the drawing board) where any image can be drawn.

Most browsers support 2D canvas context, including Opera, Firefox, Konqueror, and Safari. Some versions of Opera also support 3D canvas, and firefox also supports 3D canvas through plug-ins. We can even use the <canvas> flag in IE and use open-source JavaScript code (initiated by Google) to build a compatibility canvas based on Internet Explorer's VML support. See http://excanvas.sourceforge.net /.

Effect demonstration <Html> <pead> <title> Canvas tutorial </title> </pead> <body onload = "draw (); "> <canvas id =" canvas "width =" 800 "height =" 300 "> </canvas> </body> </ptml>

The HTML5 code is as follows:

<Html> 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.