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

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.