HTML5 is the latest HTML standard. When I wrote this article, HTML5 is still developing. HTML5 not only provides new tag information, but also contains new application programming interfaces (APIS ), this allows us to provide more multimedia and interactive functions on the Web page without using proprietary plug-ins. In addition to these, the World Wide Web alliance has published other technologies, such as location, offline storage, and file management.
After HTML5 is launched, the browser will be more like an operating system. In fact, Google's Chrome OS is an operating system that runs various network applications on the Chrome browser. Using HTML5 and other related technologies, we can build applications and blur the boundaries between traditional desktops and WEB.
Canvas graphic elements in HTML5
In this article, I will briefly describe the new <canvas> element in HTML5. <Canvas> This allows us to draw images using scripts in a browser. I will teach you how to draw a simple triangle in a browser by using the <canvas> element. The element is a simple description element to teach you how to draw a simple triangle in a browser.
Before we start, you must know that HTML5 and other related technologies are currently only compatible with the latest version of browsers. You need to use the latest Firefox, Chrome, Safari or ie9.
What is a Canvas element?
In HTML5 Is a new label element. We can describe it as a container. The following is Element HTML5 Page code.
<! Doctype html>
<Html>
<Head>
<Title> HTML5-Hello Triangle </title>
</Head>
<Body>
<Canvas id = "canvas" width = "800" height = "600">
</Canvas>
</Body>
</Html>
This short piece of HTML5 code hasn't done anything yet. Next we will draw and manipulate elements on the canvas.
Canvas settings
To build an image on the canvas, use The label defines a box with a specific width and height. In this example, we define a rectangle with a width of PX and a height of PX.
On the canvas, we need to use the coordinate system. In the upper left corner of the canvas, we define the coordinates (0, 0). The X coordinates increase with the width of the canvas, and the Y axis increases with the height of the canvas. Based on the example in this article, the X axis is from (0, 0) to (0,600), and the Y axis is from (0, 0). As shown in.
In order to be able to enter the canvas drawing, we need to finish the background first. Specifically, we can use the following Javascript code.
Var myCanvas = document. getElementById ("canvas ");
Var ctx = myCanvas. getContext ("2d ");
Now ctx holds the 2D background of the canvas element and can be drawn in two-dimensional space. We will draw a triangle above. Of course, you may wonder if we can use a 3D background? The answer is that there is no uniform standard 3D background yet, and browser support is limited.
Draw the first line
What do we need to know when we draw the first line? First, we need to know the coordinates (X1, Y1) and the ending coordinates (X2, Y2 ). We can use the following code to draw a line.
Function drawLine (ctx, color, x1, y1, x2, y2 ){
Ctx. beginPath ();
Ctx. strokeStyle = color;
Ctx. moveTo (x1, y1 );
Ctx. lineTo (x2, y2 );
Ctx. stroke ();
Ctx. closePath ();
}
The code is in the 2D background. And draw lines with the specified color. Use MOVETO () as the start point and lineTo () as the drawing line for the end point. We can use this code to draw the edge line of a triangle.
Draw triangles
Since we have the code to draw a line, it is easy to draw a triangle. Here, we can draw three lines.
Function drawTriangle (ctx, color, x1, y1, x2, y2, x3, y3 ){
DrawLine (ctx, color, x1, y1, x2, y2 );
DrawLine (ctx, color, x2, y2, x3, y3 );
DrawLine (ctx, color, x3, y3, x1, y1 );
}
Then we need to place these lines together. The Code is as follows:
Function drawOnCanvas (){
Var myCanvas = document. getElementById ("canvas ");
Var ctx = myCanvas. getContext ("2d ");
DrawTriangle (ctx, "# FF0000 ', 10, 10, 10,100,100,100 );
}
Next, we need to perform the "onload" event on the <body> tag.
<Body onLoad = "drawOnCanvas ();">
Finally, we save it as an HTML file, and then we can view the following results in the browser.
Summary:
This article is a brief introduction to the canvas Element of HTML5. There are still many elements in HTML5 that we have not continued to explore and understand. We need to keep learning and understanding. I hope this article will help you understand HTML5. This article by JIU Mu Wang official flagship store http://www.jiumw.com/original, reprinted please keep the link, thank you!
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
