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

The

canvaselement is a new feature ofHtml5compared to the previousHtml, 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 astableandp, and can be run without any external plug-ins. Just usehtmland use2Drendering contextAPI(2Drender context API) similar to ourj2medevelopment As long as you get this context, you can call its own method to draw.We can define acanvas

2DThe rendering context is based on the "brush" of thecanvascanvas. It uses a flat Cartesian coordinate system with the upper left corner as the origin (0,0). Moving to the right, the coordinate value ofxwill increase. When moving downward, the value ofywill increase, which is very similar to ours.j2mecanvas.Okay, after introducing some basic concepts, I will build the firstHtml5 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

scriptisjsThe code part, the following part is to obtain the rendering context:

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

The following code is to draw the rectangular part:

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

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 (m.sbmmt.com)!