Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall
HTML5 is currently the latest standard for HTML. When I write this article, HTML5 is still actively developing. In addition to providing new tag information, HTML5 includes a new application programming interface (API) that allows us to provide more multimedia and interactive functionality on our web pages without using proprietary plug-ins. In addition to these, the World Wide Web Consortium publishes other relevant technologies, such as geographic location, offline storage, file management, and so on.
After the launch of HTML5, the browser will be more like an operating system, in fact Google's Chrome OS is based on the Chrome browser running a variety of network applications operating system. With HTML5 and other related technologies, we can build applications that blur the dividing line between the traditional desktop and the web.
Canvas graphical elements in HTML5
In this article, I will make a simple description of new canvas elements in HTML5. Canvas allows us to draw graphics using scripts in the browser. The author will teach you how to draw a simple triangle on the browser by using the canvas element. Before we begin, you must know that HTML5 and other related technologies are currently compatible with the latest version of the browser. You need to use the latest version of Firefox, Chrome,safari browser or IE9.
What is canvas
Canvas is a new label for HTML5 that defines the label in the page as follows
<! DOCTYPE html>
<html>
<head>
<title>html5–hello triangle</title>
</head>
<body>
<canvas id= "Canvas" width= "800″height=" 600″>
</canvas>
</body>
</html>
This short HTML5 code hasn't done anything yet. Then we will draw and manipulate the elements on the canvas.
Canvas settings
We need to use the coordinate system on the canvas. In the upper-left corner of the canvas we are defined as coordinates (0,0), with the X coordinates increasing with the width of the canvas, the y-axis increasing with the height of the canvas. Based on our example, the x-axis from (0,0) to (800,0) of the line, the y-axis is from (0,0) to (0,600) of the line. As shown in the following figure.
In order to get into the canvas drawing, we need to finish his background first. We can use the following JavaScript code specifically.
var MyCanvas = document.getElementById ("Canvas");
var ctx = Mycanvas.getcontext ("2d");
CTX now holds the 2D background of the canvas element, which can be plotted in two-dimensional space. We will draw a triangle above. Of course you think we can not use the 3D background? The answer is not yet, because there is no single standard 3D background, 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 two points, actually coordinates (X1,Y1) and end coordinates (X2,Y2). Drawing lines We can use the following code.
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 use drawn lines to draw the colors. Using MoveTo () as the starting point, LineTo () draws the drawing line for the endpoint. We can use these codes to draw the edges of triangles.
Draw triangles
Now that we have the code to draw the line, it's easy to draw a triangle. Here's how to 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 put 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 do the "onload" event on the label.
<body onload= "Drawoncanvas ();" >
Finally we save it as an HTML file and then we can see the following results in the browser.
Summary：
This article is a brief introduction to the canvas element of HTML5. There are many elements in HTML5 that we do not continue to explore and understand. We need continuous learning and understanding, I hope this article for you to understand HTML5 help. This article by nine King of the official flagship store http://www.jiumw.com/original, reproduced 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
