How to draw a graphic using HTML5 's canvas graphic elements

Last Update:2014-12-08 Source: Internet

Author: User

Keywords HTML5 drawing graphic elements element painting

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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>

</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.

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!

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More