Draw lines from the canvas of html5. learn more about moveTo and lineTo. html5lineto

Source: Internet
Author: User

Draw lines from the canvas of html5. learn more about moveTo and lineTo. html5lineto

I am reading html5 today. The newly added attribute has a canvas, which is equivalent to a canvas. You can use js to draw the desired effect in it! In the w3c manual, I can see that it is not very clear to use moveTo and lineTo to draw lines. In particular, the moveTo and lineTo functions are not quite clear! So I would like to share my understanding with new friends here!

 

 

I. Code and implementation effects in w3c

The manual code is like this.

var c = document.getElementById('myCanvas');var cxt = c.getContext("2d");cxt.moveTo(10, 10);cxt.lineTo(150,50);cxt.lineTo(10,50);cxt.stroke();

The effect is as follows:

 

2. explain each step in detail

1. Obtain the canvas tag with the id value of myCanvas and assign it to c! (Specify where to draw)

2,

c.getContext('2d');

3. In the manual, an environment is returned for drawing on the canvas. 2d represents a two-dimensional drawing! (Specify the pattern type)

cxt.moveTo(10, 10);


Defines a starting point. The coordinates are (20, 20 )! The starting point of this time is as follows:

4,

cxt.lineTo(150, 50);

(1) Add a straight line. The starting point is set in Step 10 (10, 10) and the ending point is set now (3rd, 50 )! There are two functions:

(2) set a new starting point (150, 50), which is equivalent to another cxt. moveTo (150, 50 ).

5,

cxt,lineTo(10, 50);

The function is the same as that of the previous statement.

6,

cxt.stroke();

The above has done so many things, but it has never been drawn on the web page, and this statement is to present all of the above things on the Web page! So if you want to test the line or pattern effect, do not forget this sentence. Otherwise, nothing can be displayed on the webpage.

Do you want to get updates from Wang yelou's personal blog every day? Add the Public Account"Ly89cn", Or scan the QR code below!

 

This article from Wang yelou's personal blog, this article address: http://www.ly89.cn/detailB/60.html

You are welcome to share this article. For more information, see the source and address of this article.

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.