The study of canvas label in HTML5

HTML5 provides a canvas (canvas) label that can be used in conjunction with JavaScript to draw an image on a Web page. Canvas is a rectangular area that uses JavaScript to control each pixel. This article will be a brief study of the canvas tag.

1, Canvas label description

The canvas label is a rectangular area that contains two attribute widths and height, representing the width and height of the rectangular area, which are optional and can be set by CSS, and their default values are 300px and 150px. Canvas in the form of the Web page are as follows:

<canvas id= "MyCanvas" width= "height=" "style=" border:1px solid #c3c3c3; >
Your Browser does not support the canvas element.
</canvas>

Analytical:

Setting the id attribute for canvas is convenient for JavaScript invocation;

The second line displays this line of text when the browser does not support the canvas label.

2. Monitor browser support

The canvas tag is not supported by all current browsers, so when using the canvas drawing, you should first detect if the client browser supports it. The following example uses JavaScript to determine whether the browser supports:

<canvas id= "MyCanvas" width= "height=" "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 determines whether the browser supports canvas tags by determining whether the GetContext method is empty.

3. Draw lines and patterns

It is cumbersome and incompatible to draw a line or pattern on a Web page before canvas. Now with the canvas tag, everything becomes easy. Now you just need to add a canvas tag to the page and invoke its corresponding method via JavaScript to easily draw lines and patterns on the page.

Draw lines <br><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:

The

Displays a canvas tag on the page, setting the attributes such as ID, width, height, and setting a border for the label.
Detect browser support in JavaScript
when the browser is supported, start calling the GetContext method to get the context of the drawing (this place is much like the GDI drawing in VC ~ ~), currently provides only 2D context and may support OpenGL in the future The 3D context of ES. The
MoveTo method is to move the current position to the specified coordinates
LineTo method is to draw a line to the left of the specified
Strokestyle property is the color of the specified line, and in this example the Red
LineWidth property sets the thickness of the line. This is set to 4px
The stroke method shows the line. It seems that the previous only rules where there are lines, and does not show, when this method is called, the line can be displayed.

Draw the pattern <br><canvas id= "MyCanvas" width= "height=" 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, the previous code is the same, no longer verbosity.
The FillStyle property sets the color of the fill, transparency, and so on, and if set to RGB (200,0,0), it represents a color, is opaque, and if set to Rgba (0,0,200,0.5), the color is RGB (0,0,200), and the transparency is 50%.
The FillRect method is to draw a rectangle with no border and only fill color. This method has four parameters, the first two representing the coordinate position in the upper-left corner, the third parameter is the length, and the fourth parameter is the height.
The Strokerect method draws a rectangle with a border. The four parameters of the method are interpreted as above.
The Clearrect method is to clear a rectangular area and the cleared area will not have any lines. The four parameters of the method are interpreted as above.

4. Draw the Path

A path is a good way to draw a custom graphic, which starts with the Beginpath () method in canvas, where you can draw lines, curves, etc., and then call Fill () and stroke () to complete the fill and set the border, through Closepath () Method ends the drawing of the path. The following example illustrates how to draw a path in a speech:

<canvas id= "MyCanvas" width= "height=" "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:

After the rendering context is obtained, the fill color, border color, and border width are set.
Call the Beginpath () method to start the drawing path
Draw a closed custom graphic with the LineTo () method
Call the Fill () method for padding
Call the stroke () method to set the border
Call the Closepath () method to draw the end path