Study Notes on HTML5 canvas (1)-draw a rectangle

Small man (Bill man) Personal Original, welcome to reprint, reprint please indicate the address, small man (Bill man) column address http://blog.csdn.net/bill_man

The canvas element is a new feature of HTML5 compared with the previous html. This part of blog posts will study the application of this component, especially in web game development.

The canvas component is similar to the previous table and Div components, and can run without any external plug-ins. You only need to use HTML and use the 2D rendering context API (2 drender context API), which is similar to the grapics in our j2s development and the canvas paint brush in Android, you can call its own method to draw the context.

We can define a canvas using the following method:

<Canvas id = "canvas" width = "400" Height = "400"> </canvas>

Canvas is a wrapper for 2D rendering contexts. 2d rendering contexts are based on the canvas's "paint brush ". It uses the Cartesian coordinate system of the plane, and the upper left corner is the origin (0, 0 ). Moving to the right will increase the coordinate value of X. When moving down, the value of Y will increase, which is similar to our j2's canvas.

Now, after introducing some basic concepts, I will build the first HTML5 canvas. The first is as follows:

A simple example is to draw a rectangle. Let's look at the code below:

The label of the canvas defines a canvas, but does not process it. The label script part is the JS Code part, and the following part is the rendering context:

VaR canvas = Document. getelementbyid ('canvas ');

VaR context = canvas. getcontext ('2d ');

First obtain the canvas element, and then obtain the 2D rendering context.

The following code draws a rectangle:

Context. fillstyle = '#000000 ';

Context. fillrect (50, 50,100,100 );

First set the color, and then draw the four parameters, respectively, the horizontal and vertical coordinates of the start point and the width and height.

In case of any errors, I hope you can correct them more.

Next, continue to study the 2D rendering context API