HTML5 canvas getting started

Original article: http://www.csser.com/dev/274.html

HTML5 canvas is an HTML5 canvas that is supported by modern browsers, this article will show you how to use the HTML5 canvas API to operate Canvas elements, draw images, change drawing colors, and delete images. Let's start a short trip to this cool new technology.

Canvas Element Introduction

Using the canvas element is quite simple. It is just a simple HTML Tag and has two features: the outer width and height.

 
<Canvas width = "500" Height = "500"> <! -- Insert backward compatible content here. browsers that do not support canvas can parse and display the content --> </canvas>
 

The aboveCodeA transparent canvas is inserted into the page. The content inside the Canvas Element can display the information you want to provide to your users in a browser that does not support the canvas function, lenovo's <NoScript> element can be used.

Browser support

It is very important that the support for canvas by browsers is quite good. All modern browsers support it, including the latest version of ie9:

Internet Explorer 9.0 +
Safari 3.0 +
Firefox 3.0 +
Google Chrome 3.0 +
Opera 10.0 +
IOS 1.0 +
Android 1.0 +

Interestingly, you can use the canvas function in IE8 and earlier ie browsers, with the help of the assumercanvas plug-in.

Canvas size

When defining the size of a canvas element, it is best to set its width and height through HTML, because setting the width and height through CSS will cause the canvas to scale proportionally to the value you set, there is a logical reason behind this: there is an object named 2D redering context in the canvas element, so setting the canvas size through CSS will produce a strange effect.

Explore 2D rendering Environments

The canvas element we mentioned above is only part of the canvas function, and the other part is the 2D rendering environment, which allows you to implement something cool to see.

What needs to be fully clarified is that when you use canvas, You do not draw images on the canvas element. In fact, you are in the 2D rendering environment inside the Canvas Element.

Coordinate System

If you have used 2D plottingProgramming LanguageFor example, you can understand screen-based coordinate systems. There is no difference in the 2D rendering environment inside the canvas. It adopts the standard Cartesian coordinate system. The origin is located in the upper left corner of the screen. Moving to the right will increase the X coordinate value, moving down will increase the value of Y coordinate, which is easy to understand.

Usually, the unit of the coordinate system is 1 pixel of the screen.

Operate the 2D rendering environment

You need to use the API provided by JavaScript to obtain the 2D rendering environment object. The method is getcontext (). Let's look at a simple example:

<Canvas id = "csser-com-canvas" width = "500" Height = "500"> <! -- Backward compatible content --> </canvas> <SCRIPT> var canvas = document. getelementbyid ("csser-com-canvas"); var c = canvas. getcontext ("2D"); </SCRIPT>
 

By calling the getcontext () method of the canvas object, the C variable contains references pointing to the 2D rendering environment. This means that you have completed all the preparations for drawing on the canvas, next we can start plotting.

Draw a rectangle

After obtaining the 2D rendering environment object, you can call a large number of methods provided by the API for plotting. The most basic method is fillrect (), you can draw a rectangle with a fill color (the default color is black ).

Add the following code under the C variable:

 
C. fillrect (0, 0, 50, 50 );
 

This will draw a square with a black background in the upper left corner of the canvas:

Four parameters are input when the fillrect () method is called:

• The first is the X coordinate position based on the origin.
• The second is the Y coordinate position based on the origin.
• The third is the width.
• The fourth is the height.

The pseudocode of fillrect should look like this:

C. fillrect (X, Y, width, height );
 

The cool thing is that you can not only draw filled rectangles, but also draw box rectangles. You can use the strokerect () method to draw a rectangle around to produce stroke effects, such:

 
C. strokerect (50, 50,100,100 );
 

The parameters of strokerect are consistent with those of fillrect. The drawn results are as follows:

Canvas plotting is simple and elegant, and all methods are easy to understand. However, when used together, you can draw beautiful images.

Draw path

A rectangle is the only image that can be drawn using a single API method. Put it aside first, and we will learn how to draw a path (paths. You can use the path to draw lines, consecutive curves, and composite images.

Some AIP methods must be used to draw a simple path:

Beginpath starts a new path
Drawing start point of the moveTo mobile path
Lineto draws a continuous path from the point defined by moveTo or from the last lineto endpoint.
Closepath connects the last vertex and the original vertex and closes the path painting.
Fill path with color in fill
Stroke

Run the following code:

C. beginpath (); C. moveTo (50, 50); C. lineto (50,250); C. lineto (250,250); C. closepath; C. Fill ();
 

The execution result is:

You can use the same method to draw the desired image. Canvas also contains more advanced path painting, such as an arc (can draw a circle) and a besell curve (used to draw a cool curve effect ), in short, it is much more complex to draw a path than to draw a rectangle.

Change color

So far, our examples are drawn with black fill or stroke. Canvas also provides some attributes to change the color of the drawing. They are fillstyle and strokestyle, their syntax is self-explanatory, So we directly change the fill color of a rectangle:

 
C. fillstyle = "RGB (255, 0, 0)"; C. fillrect (50, 50,100,100 );
 

Result:

Alternatively, you can change the stroke color:

 
C. strokestyle = "RGB (255, 0, 0)"; C. strokerect (50, 50,100,100 );
 

Result:

The fillstyle and strokestyle attributes are very beautiful. They all support common CSS color values, which means you can use RGB, rgba, HSA, color names, and hexadecimal color values.

Another point to note is that changing the color value in the canvas does not affect any image that has been drawn. For example, if you have drawn a black rectangle and set it to red, then draw another rectangle, and the first rectangle is still black.

Change the line width

In addition to changing the color, you can also use the linewidth attribute to change the width of the stroke line. In the preceding example, you can change the line width:

 
C. linewidth = 20; C. strokestyle = "# f00"; C. strokerect (50, 50,100,100 );
 

Result:

The same line width can be changed:

 
C. linewidth = 20; C. beginpath (); C. moveTo (50, 50); C. lineto (1, 50,250); C. lineto (1, 250,250); C. closepath (); C. stroke ();
 

Result:

There are also some other ways to change the line, such as setting the end of the line in linecap and configuring the line angle in linejoin.

Delete A Graph

Finally, let's take a look at how to delete a drawn image. to delete a graph, you only need to use the clearrect method provided by the javascript API. The principle is to make the background of the rectangle area specified by the parameter transparent.

In this example, the canvas width is 500 pixels. to delete the entire canvas image, you can do this:

 
C. fillrect (50, 50,100,100); C. clearrect (0, 0,500,500 );
 

After the above code is executed, you will not see anything. In fact, the filled rectangle has been drawn, but is deleted instantly, so you cannot see it.

If you do not know the width and height of the canvas, clear the entire canvas as follows:

 
C. clearrect (0, 0, canvas. Width, canvas. Height );
 

Delete a region from the canvas

If you do not want to delete the image of the entire canvas, but just delete an area in the canvas, if you draw a black square and draw a Red Square next to it:

 
C. fillrect (50, 50,100,100); C. fillstyle = "# f00"; C. fillrect (200, 50,100,100 );
 

It looks like this:

Next, you can use clearrect to delete the square of the black background and retain only the Red Square:

 
C. clearrect (50, 50,100,100 );
 

Note that the clearrect parameter can overwrite the region of the image to be deleted.

Conclusion

canvas is easy to use, quick to use, and powerful (alas, the Article translated by myself cannot be read by myself, too many ports)