Html5 Canvas Preliminary Study Notes (1)-Draw a rectangle

The

canvas element is a new feature of Html5 compared to the previous Html , this blog post will study the application of this component, especially its application in web game development. The

canvas component is similar to the previous components such as table and p, and can be run without any external plug-ins. Just use html and use 2Drendering contextAPI (2Drender context API) similar to our j2me development As long as you get this context, you can call its own method to draw. We can define a canvas

as follows:

<canvas id="canvas" width="400" height="400"> </canvas>

Canvas is used as a wrapper for the 2D rendering context,

2DThe rendering context is based on the "brush" of the canvas canvas. It uses a flat Cartesian coordinate system with the upper left corner as the origin (0, 0). Moving to the right, the coordinate value of x will increase. When moving downward, the value of y will increase, which is very similar to ours. j2me canvas. Okay, after introducing some basic concepts, I will build the first Html5 Canvas, first of all, the rendering is as follows

## Very simple one An example is to draw a rectangle. Let’s look at the code below:

The label of
canvas

is to define a

canvas
Canvas, but no processing is done. The part of the label

script is js The code part, the following part is to obtain the rendering context:

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

First obtain the canvas element, and then obtain the 2dRendering context.

The following code is to draw the rectangular part:

context.fillStyle = '#000000';
context.fillRect(50, 50, 100, 100);

First set the color, and then draw. The four parameters are the horizontal and vertical coordinates of the starting point and the width and height

The above is the content of Html5 Canvas Preliminary Study Notes (1)-Drawing a Rectangle. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!