Canvas tags are learning HTML5


HTML5 provides the canvas (canvas) through the use of tags, combined with Javascript, can draw the image in the webpage. Canvas is a rectangular area, use Javascript to control each of its pixels. This paper will make a brief study on the canvas tag.

1,Canvas label

The canvas tag is a rectangular area, it contains two attributes width and height, respectively, the rectangular area that represents the width and height, the two attributes are optional, and can be set up by CSS, the default value is 300px and 150px. The following canvas in webpage form:

?

1

2

3

<canvas id="myCanvas" width=”300” height=”200” style="border:1px solid #c3c3c3;">

Your browser does not support the canvas element.

</canvas>

?

1

 Analytical:

?

1

For the canvas to set the ID property is convenient for Javascript calls,

?

1

The second line is when the browser does not support canvas tags, will display this line of text.


2,Detect browser support

The Canvas tag does not support all current browser, so when using the canvas drawing, the first test client browser does not support. The following example by Javascript if the browser supports:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<canvas id="myCanvas" width=”300” height=”200” style="border:1px solid #c3c3c3;">

Your browser does not support the canvas element.

</canvas>


<script type="text/javascript">

var myCanvas = document.getElementById("myCanvas");

if (!myCanvas.getContext)

{

alert("Your browser does not support the canvas element.");

}

else

{

// do something here

}

</script>

Analytical:

The above Javascript code via the getContext method is empty to judge whether the browser supports canvas tag.


3,Draw lines and patterns

In the absence of canvas before, want to draw lines or patterns in the webpage above, is very cumbersome and not compatible. I was in the "JS" line drawing in an article reprinted network used in the IE and FF of line drawing method, but if you want the general, it is not possible. But now there is a canvas label, everything becomes easy.

Now, you just need to add canvas tags on the page, and through Javascript calls the appropriate method of it, you can easily draw lines and patterns on the page.

//Draw a line

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<canvas id="myCanvas"  style="border:1px solid #c3c3c3;">

Your browser does not support the canvas element.

</canvas>


<script type="text/javascript">

var myCanvas = document.getElementById("myCanvas");

if (!myCanvas.getContext)

{

alert("Your browser does not support the canvas element.");

}

else

{

var myContext = myCanvas.getContext("2d");

myContext.moveTo(200, 150);

myContext.lineTo(100, 100);

myContext.lineTo(200, 50);

myContext.strokeStyle = "#FF0000";

myContext.lineWidth = 4;

myContext.stroke();


}

</script>

Analytical:

On the page to place a canvas label, set the ID, width, height and other properties, and set the frame for the label.

In Javascript to detect if the browser supports

When a browser support began to call the getContext method to get a graphics context (this place is like a drawing of GDI ~ VC), currently only available in the 2D context, support OpenGL ES may have a future 3D context.

The moveTo method is the current position to the specified coordinates

The lineTo method is designated to the left to draw a straight line

The strokeStyle property is to specify the color of the line, in this example specifies red

The lineWidth property is set the thickness of the line, this is set to 4PX

The stroke method is a linear display. It is just before the stipulated where the line, did not show, when after calling this method, the line can display.


// Draw pattern


?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<canvas id="myCanvas" width="300" height="200"  style="border:1px solid #c3c3c3;">

Your browser does not support the canvas element.

</canvas>


<script type="text/javascript">

var myCanvas = document.getElementById("myCanvas");

if (!myCanvas.getContext)

{

alert("Your browser does not support the canvas element.");

}

else

{

var myContext = myCanvas.getContext("2d");


myContext.fillStyle = "rgb(200,0,0)";

myContext.fillRect(10, 10, 55, 50);


myContext.fillStyle = "rgba(0, 0, 200, 0.5)";

myContext.fillRect(30, 30, 55, 50);


myContext.fillRect(100, 0, 150, 50);

myContext.strokeRect(100, 60, 150, 50);

myContext.clearRect(130, 10, 90, 30);

}

</script>

Analytical:

Directly to the fillStyle attribute, before the code is the same, no longer tautology.

The fillStyle property to set the fill color, transparency, if set to "RGB (200,0,0)", said a color, opaque; if set to "RGBA (0,0200,0.5)", said RGB color (0,0200), the opacity to 50%,

The fillRect method is to draw a rectangle, the rectangle region has no borders, only fill color. This method has four parameters, two months before the said position on the upper left corner of the third parameters, fourth parameters for length, height.

The strokeRect method draws a rectangle. Four parameters of the method of interpretation.

The clearRect method is the removal of a rectangular area, cleared areas will not have any lines. Four parameters of the method of interpretation.


4,Draw a path

Path is a good way to draw a custom graphics, in the canvas through the beginPath () method to draw a path, this time you can draw a straight line, curve, draw calls after completion of the fill () and stroke () to complete the filling and set the border, through the closePath () method of drawing the end of path. How to draw a path following the example of a speech:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

<canvas id="myCanvas" width="300" height="200"  style="border:1px solid #c3c3c3;">

Your browser does not support the canvas element.

</canvas>


<script type="text/javascript">

var myCanvas = document.getElementById("myCanvas");

if (!myCanvas.getContext)

{

alert("Your browser does not support the canvas element.");

}

else

{

var myContext = myCanvas.getContext("2d");


myContext.fillStyle = '#0000ff';

myContext.strokeStyle = '#ff0000';

myContext.lineWidth = 2;


myContext.beginPath();


myContext.moveTo(30, 30);

myContext.lineTo(150, 30);

myContext.lineTo(150, 120);

myContext.lineTo(90, 100);

myContext.lineTo(120, 60);

myContext.lineTo(30, 30);


myContext.fill();

myContext.stroke();


myContext.closePath();

}

Analytical:

In the rendering context, set the fill color, border color, border width.

Call beginPath () method to draw a path

Through the lineTo () custom graphics methods to draw a closed

Call fill () method for filling

Call stroke () method are set.

Call closePath () method of drawing the end of path

Posted by Sam at November 17, 2013 - 8:39 AM