HTML5 canvas: Get Two-Dimensional Context and start plotting

Original article:

Http://www.lifelaf.com/blog? P = 346

This article is translated from Steve Fulton & Jeff Fulton HTML5 canvas, chapter 1, "retrieving the 2D context, the drawscreen () function ".

After the browser supports canvas, we need to obtain the Two-Dimensional Context of canvas for a series of operations. In HTML5 design, canvas is compatible with multiple contexts (including 3D contexts), but in this article, we only consider 2D contexts.

It's time to write some real canvasCode. Canvas context refers to the corresponding objects used for drawing on the HTML page. Therefore, all operations on canvas are performed through context.

Next, we will create a function called drawscreen () for plotting. The "screen" here is not a browser window, but a drawing area in the canvas. The name is "screen", mainly because canvas plays a role in games or applications written in canvas and does not affect "Windows" or "screens.

The first thing we need to do is to clear the area used for drawing. The following two lines of code draw a yellow rectangle of the same size as the canvas. Fillstyle sets the color, while fillrect () creates a rectangle and adds it to the canvas:

Context.Fillstyle="# Ffffaa";Context.Fillrext(0,0,500,300);
 

Next, let's take a look at the text "Hello World!" displayed on the screen !", What code does it need to write.

2. The first step is to set the text color, just like the color of the rectangle:

   Context.Fillstyle="#000000";

4. Step 2: Set the font size and width:

   Context.Font="20px_sans";

6. Then, we adjust the vertical position of the text in the row:

   Context.Textbaseline="TOP";

8. Finally, we call the filltext () method of the context object to print the test text to the screen. The filltext () method has three parameters: text string, X coordinate, and Y coordinate:

   Context.Filltext("Hello world! ",195,80);

After adding text to the screen, let's add some images-load the image file and display it on the page. To display images in the canvas, we need to create an image () object instance and set its src attribute to the file name of the image file to be loaded.

Before displaying an image, we must wait until the image file is loaded. Therefore, you must create a callback function and set the onload attribute of the image object to listen to the image loading event. Once the onload event is triggered, the callback function is executed immediately. In this callback function, we can call the context. drawimage () Statement and input three parameters (image object, X coordinate, Y coordinate) to display the image on the canvas:

  var   helloworldimage  =  New   image   ();   helloworldimage  .   SRC  =  "helloworld.gif " ;   helloworldimage  .   onload  =  function   ()  {  context  .   drawimage   (  helloworldimage  ,   160  ,   130   );  } 

Finally, we draw a rectangular border between the text and the image. You can use context. strokestyle to set the border color and call context. strokerect () to draw the border. The strokerect () method accepts four parameters, which are the X and Y coordinates of the vertex in the upper-left corner of the rectangle border, and the X and Y coordinates of the vertex in the lower-right corner:

 
Context.Strokestyle="#000000";Context.Strokerect(5,5,490,290);
 

The final result is as follows: