Canvas labels for HTML5

 

HTML5 provides canvas labels that can be used with Javascript to draw images on webpages. Canvas is a rectangular area. Javascript can be used to control each pixel of a Canvas. This document briefly describes the canvas labels.

1. canvas label description

The canvas label is a rectangle area. It contains two attributes: width and height, indicating the width and height of the rectangle area. Both attributes are optional and can be set through css, their default values are 300px and 150px. The canvas format on the webpage is as follows:

?

123	<canvas id="myCanvas" width=”300” height=”200” style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>

?

1	Resolution:

?

1	Setting the id attribute for canvas is convenient for Javascript calls;

?

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

 

2. check browser support

The Canvas label is not currently supported by all browsers. Therefore, when drawing a canvas, you must first check whether the client browser supports it. The following example uses Javascript to determine whether the browser supports this function:

?

123456789101112131415

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

Resolution:

The Javascript code above judges whether the getContext method is null to determine whether the browser supports the canvas label.

 

3. draw lines and patterns

It is very troublesome and incompatible to draw lines or patterns on a webpage before canvas is available. I used to repeat the methods that are commonly used on the Internet to draw lines in IE and FF, but it is impossible to use these methods. But now with the canvas tag, everything becomes simple.

Now, you only need to add the canvas label on the page and call the corresponding method through Javascript to easily draw lines and patterns on the page.

// Draw a line

?

12345678910111213141516171819202122

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

Resolution:

A canvas label is placed on the page to set attributes such as id, width, and height, and set a border for the label.

Check whether the browser supports Javascript

When supported by the browser, call the getContext method to obtain the drawing context (similar to the GDI drawing in vc ~~), Currently, only 2D contexts are provided, and 3D contexts of OpenGL ES may be supported in the future.

The moveTo method is used to move the current position to the specified coordinate.

The lineTo method draws a straight line to the specified left.

The strokeStyle attribute specifies the line color. In this example, it is marked as red.

The lineWidth attribute sets the line width, which is set to 4px here.

The stroke method is to display a straight line. It seems that the line is not displayed, and the line is displayed only after this method is called.

 

// Draw a pattern

 

?

12345678910111213141516171819202122232425

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

Resolution:

Directly to the fillStyle attribute, the previous code is the same and will not be repeated.

The fillStyle attribute sets the fill color and transparency. If it is set to "rgb (200, 0, 0)", it indicates a color that is not transparent. If it is set to "rgba, 0.5) ", the color is rgb (200, 50%), the transparency is,

The fillRect method is to draw a rectangle, which has no border and only fill color. This method has four parameters, the first two represent the coordinates 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 this method are interpreted as the same as above.

The clearRect method clears a rectangular area without any lines. The four parameters of this method are interpreted as the same as above.

 

4. Draw a path

A path is a good way to draw a custom image. You can use beginPath () in the canvas to draw a path. At this time, you can draw a line, curve, and so on. After the drawing is complete, call fill () and stroke () to complete the filling and setting of the border, through the closePath () method to end the painting of the path. The following example shows how to draw a path:

?

1234567891011121314151617181920212223242526272829303132

<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();     }

Resolution:

After obtaining the rendering context, the fill color, border color, and Border width are set.

Call beginPath () to start creating the path.

Draw a closed custom image using the lineTo () method

Call the fill () method for filling

Call the stroke () method to set the border

Call closePath () to draw the end path