Use canvas to draw a simple "my world" Avatar and canvas Avatar

Use canvas to draw a simple "my world" Avatar and canvas Avatar

It took me four and a half days to finish reading Head First HTML5. The best thing I feel when I learned this book is that my knowledge is simple, there are a lot of great technologies waiting for me. [Kumamoto expression] Help me to learn more!

<Canvas> is the most popular new H5 tag, so this time I wrote a demo with it to express my love for it.

Body:

Not much nonsense. Go to the Code ~

Html section

<Canvas id = "myCanvas" width = "800" height = "800"> want to see a picture? Upgrade your browser ~ </Canvas>

The html section only contains this simple sentence. <canvas> the internal text is output when the browser does not support it, this is really a very convenient usage (here, the

 

Js Section

Window. onload = function () {// obtain the reference var myCanvas = document for canvas. getElementById ("myCanvas"); // obtain the reference var context = myCanvas. getContext ("2d"); // facial drawRect (context, 90,130, "# ff813e"); // hair context. fillRect (10, 0,); // context in the left-side corner. fillRect (10, 40, 20, 20); // context of the Right vertex. fillRect (90,40, 20,20); // Left Eye Mask drawRect (context, 25,70, 25,15, "# fff"); // Left Eye Mask drawRect (context,, "# 3d46ce"); // right eye socket drawRect (context, "# fff "); // drawRect (context, 70,70, 12,15, "# 3d46ce"); // nose drawRect (context, 54,88, 12,12, "# ba7b56 "); // mouth drawRect (context, 38,106, 450000, "#50,116"); // tongue drawRect (context, 20, 10, "# f494b9 ");};

Although there are more than a dozen lines of code, there are many repeated parts, that is, four things:

(1) document. getElementById (id value)

Get our canvas so that you can use it to show our beautiful creations in future code.

(2) canvas. getContext ("2d ")

Get the context of the canvas and return an object. There are many ways to create this object. (PS: although this is 2d, it does not mean that 3d is there, but it is also a good thing. Maybe it will be implemented by you ?)

(3) drawRect (context, x, y, rectWidth, rectHeight, color)

This is a user-defined function that passes in the objects returned by canvas. getContext ("2d") as parameters so that we can call various methods contained in this object in the function. At the same time, specify the coordinates of the points to be drawn, the width and height of the rectangle to be drawn, and the color of the rectangle to be filled.

(4) context. fillRect (x, y, rectWidth, rectHeight)

Even though it finally appeared, we called a method of referencing the object in context, which drew a black rectangle for us on the canvas. Why is it black? Because this is the default color. If you want to change the color, you can refer to the following section.

Next, we will invite the drawRect function to debut.

 

Function drawRect (context, x, y, rectWidth, rectHeight, color) {// start a path context. beginPath (); // start position to move to the Point context specified by x and y. moveTo (x, y); // draw a path context for the point with the coordinates (x + rectWidth, y. lineTo (x + rectWidth, y); // draw a path context from the coordinate (x + rectWidth, y + rectHeight. lineTo (x + rectWidth, y + rectHeight); // draw a path context from the point where the coordinates are (x, y + rectHeight. lineTo (x, y + rectHeight); // closure path context. closePath (); // set the color context. fillStyle = color; // fill in the Rectangular context formed by the painted path. fill (); // set the color context. fillStyle = "#000"; // you can specify the width of a line. lineWidth = 2; // line context. stroke ();}

 

In the drawRect function, we use a rectangle with an edge and an edge. Of course, you can use the method used to draw your favorite shapes. Note that the path we have drawn is invisible. If you want to see the path, you can use the stroke method to show it, the path we draw here is a closed rectangle. When the fill method is called, the color specified by fillStyle is used to fill the specified internal area of the path. So if you want to change the fill or line color, try the fillStyle attribute ~

So far, our demo has been completed ~ Let's see the effect ~

Ah, Hahahaha, Have you ever fallen in love with canvas? (Canvas says: Even if you don't love me, there are also many people who love me, but if you want to love me, you can barely accept it)

When the weather is hot, everyone should pay attention to heatstroke prevention, so don't go out at noon. Where should we stay?-suggestions from the guy who went out for dinner at noon and suffered from heatstroke and headache