Home > Developer > Web Develop
HTML5, this should not need to introduce more, as long as the developers should not be unfamiliar. HTML5 is the "emerging" web technology standard, currently, in addition to IE8 and the following versions of IE browser, almost all major browsers (FireFox, Chrome, Opera, Safari, ie9+) have started to support HTML5. In addition, in the mobile browser market, a number of mobile browsers have launched a "HTML5 on the support and performance of the arms race. HTML as a revolutionary web technology standard, coupled with the support of many browser vendors or organizations, you can imagine that HTML5 will become the leader of the future web technology.
HTML5, said it is "emerging", in fact, it is not new. After all, HTML5 's first formal draft was announced in 2008. It's been some years since 2008. However, so far, for most developers, is still "thunder, Rain"-heard HTML5, the actual use of HTML5 is very few.
As we all know, many new features have been added to HTML5. Of the many features of HTML5,Canvas should be considered one of the most compelling new features. We use HTML5 's canvas object to draw graphics directly on the browser's web page. This means that the browser can be separated from third-party plug-ins such as Flash to display graphics or animations directly on the Web page.
Now, let's show you how to use HTML5 canvas to draw basic graphics for HTML5 beginners.
First, we need to prepare the following HTML base code:
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "UTF-8">5 <title>HTML5 Canvas Getting Started sample</title>6 </Head>7 <Body>8 9 </Body>Ten </HTML>
The above code is a basic code template for a HTML5 page. Where the first line <!DOCTYPE html> of code is a document type label directive, which is also the standard document type directive for HTML5 pages, to tell the browser "This is a HTML5 page, please follow HTML5 's page standards to resolve the page." The 4th Line <meta charset="UTF-8"> of code tells the browser "the character encoding for this HTML5 page is utf-8", which is also the standard notation for HTML5 page set character encoding. " This differs from the previous HTML character encoding directives.
1 <!-- -2< http-equiv = "Content-type" Content = "Text/html;charset=utf-8">
Now, let's take a walkthrough of a canvas drawing in an HTML file that contains the above code. First, we add the following canvas tag body to the section of the above HTML code.
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "UTF-8">5 <title>HTML5 Canvas Getting Started sample</title>6 </Head>7 <Body>8 9 <!--Add a canvas label and a red border to make it easier to see the effect on the page -Ten <CanvasID= "MyCanvas"width= "400px"Height= "300px"style= "border:1px solid red;"> One your browser does not support canvas labels. A </Canvas> - - </Body> the </HTML>
At this point, we open the page with a browser that supports HTML5, and we'll see something like this:
Canvas label Display effect
In HTML5, the canvas label itself does not have any behavior, only the page occupies a specified size of the page blank space. The canvas tag is the equivalent of a blank canvas, and we need to write our own code using the canvas API provided by JavaScript to draw the graphics we want on this canvas.
Note: The text content in the canvas tag will be displayed in browsers that do not support HTML5. As shown in the HTML code above, if your browser does not support HTML5 canvas tags, the text "Your browser does not support canvas labels" will be displayed at the canvas label.
As "painters" we need to familiarize ourselves with the brushes in our hands, the canvas objects in JavaScript and their related content.
In HTML5, a canvas tag corresponds to an Canvas object, and we can use document.getElementById() regular functions such as JavaScript to get the object. It is important to note that in JavaScript, we do not manipulate Canvas objects directly, Canvas but instead use CanvasRenderingContext2D objects to get the corresponding graphical drawing context objects, and then we reuse CanvasRenderingContext2D The object comes with many drawing functions to draw the drawing.
It's like every canvas has a paintbrush, and to paint on the canvas, we'll first get the corresponding brush and then use that brush to draw on the canvas. CanvasRenderingContext2D The object is equivalent to this brush. Now, let's try to get this brush in JavaScript first.
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <MetaCharSet= "UTF-8">5 <title>HTML5 Canvas drawing lines Getting Started example</title>6 </Head>7 <Body>8 9 <!--Add a canvas label and a red border to make it easier to see the effect on the page -Ten <CanvasID= "MyCanvas"width= "400px"Height= "300px"style= "border:1px solid red;"> One your browser does not support canvas labels. A </Canvas> - - <Scripttype= "Text/javascript"> the //Get Canvas object (canvas) - varCanvas=document.getElementById ("MyCanvas"); - - //simply detects if the current browser supports canvas objects to avoid prompting for syntax errors in some browsers that do not support HTML5 + if(canvas.getcontext) { - //gets the corresponding Canvasrenderingcontext2d object (brush) + varCTX=Canvas.getcontext ("2d"); A } at </Script> - </Body> - </HTML>
As the code above shows, we can use Canvas the object's getContext() methods to CanvasRenderingContext2D get the object. A more attentive reader should note that getContext() the method needs to pass in a string--and the name of the 2d CanvasRenderingContext2D object being fetched is also 2D. This is because HTML5 currently supports only 2D drawings, but may also support 3D or other forms of drawing in future HTML5. At that point, we might need getContext("3d") to use CanvasRenderingContext3D it to get the object and draw 3D graphics.
HTML5 Canvas Drawing a detailed introduction
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
