Draw a small loading interface using canvas in 10 minutes

First, use the canvas style defined.

<Canvas width = "1024" Height = "720" id = "canvas" style = "border: 1px solid #808080; display: block; margin: 100px auto;> your browser does not support canvas. </canvas>

Here we mainly want to talk about width and height. do not define it in the style, otherwise it will be stretched. (For this, we recommend that you read the W3C documentation, not very familiar with it)

The height and width attributes determine the coordinate system of the width and height of the canvas, while the CSS attribute only determines the size of the box, which will be displayed.

    var canvas = document.getElementById(‘canvas‘);    var ctx = canvas.getContext(‘2d‘);

Obtain the object, and then obtain the context for drawing.

Okay. Let's take a small example (draw an arc)

1. // Set the line width and color (I like to name him as a hollow plot)

1. CTX. linewidth = 2;
2. CTX. strokestyle = '#176785 ';

// Arc is an arc shape. If fill is used, it is closed. CTX. beginpath (); CTX. ARC (512,360,100, 0.5 * Math. Pi, 1 * Math. Pi); CTX. Stroke (); CTX. closepath ();

For CTX. beginpath (); and CTX. closepath (); I think it is the soul of canvas. Some good canvas engines are highly efficient, and they have a great relationship.

1. For example, some people draw a canvas with sertices, that is, they draw the same effect after N times on the canvas.

Let's look at the following example.

     ctx.beginPath();    ctx.arc(512, 360, 100, 0.5 * Math.PI, 1 * Math.PI);    ctx.closePath();    ctx.stroke();

This is CTX. closepath (); is used to close the lines, but the fill method has CTX by default. closepath (); this function, while CTX. beginpath (); is used to split the scope of a function.

2. The example shows the above. If you need to remove CTX. beginpath (); from the above two sections of code, the arc will be drawn twice, and the second will be drawn once. The implication is that if there is no CTX. beginpath ();, the code will draw 100 images, the first will draw 100 times, the first 99 times, in short, 100 + 99 + 98 + .....

3. The next two small examples.

// Define the color of a gradient. In fact, the coordinates are X, Y, W, H var color = CTX. createlineargradient (512,460,512,260); // start color, and end color. addcolorstop (0, '#499989'); color. addcolorstop (1, '#176785'); CTX. beginpath (); CTX. fillstyle = color; CTX. arc2 (512,360, 99, 0, 2 * Math. pi); CTX. fill (); CTX. closepath (); // draw the text var A = 12; CTX. font = "50px Arial"; CTX. fillstyle = "# fff ";

// Center CTX. textalign = "center"; CTX. beginpath (); // text content, start coordinate, width CTX. filltext (A, 510,375, 64); CTX. closepath ();

4. Next we will combine the above content.

// Timer var timeclear; // defines some numbers var arcnum = 0.02, textnum = 1; function load1 () {If (textnum> = 101) {return 0;} CTX. linewidth = 2; CTX. strokestyle = '#176785'; CTX. beginpath (); CTX. ARC (512,360,100, (0.5 + arcnum-0.02) * Math. pi, (0.5 + arcnum) * Math. pi); CTX. stroke (); CTX. closepath (); // draw the gradient color var color = CTX. createlineargradient (0, 512,460,512,260); color. addcolorstop (0, '#499989'); color. addcolorstop (1, '#176785'); CTX. beginpath (); CTX. fillstyle = color; CTX. ARC (512,360, 99, (0.5-arcnum/2) * Math. pi, (0.5 + arcnum/2) * Math. pi); CTX. fill (); CTX. closepath (); // draw text CTX. font = "80px Arial"; CTX. fillstyle = "# fff"; CTX. textalign = "center"; CTX. beginpath (); CTX. filltext (textnum, 510,385,124); CTX. closepath (); // CTX. clearrect (1024,720, 0.02); arcnum = arcnum +; textnum = textnum + 1;} timeclear = setinterval (load1, 60 );

It looks uncomfortable. We recommend that you test it on your computer:

Unique address for online debugging: http://www.gbtags.com/gb/debug/7400a9ba-51a7-409b-b1f4-b01363b9c625.htm

A simple loading is finished, but there are many problems in it. For example, the fill and text are partially painted repeatedly and 99 times are drawn, in fact, I mainly want to use the circle fill to replace the clear text after each painting. If you change the text color, you may understand what I mean. This will then cause the bottom to be drawn 100 times, resulting in a sample with a tooth at the bottom.

In addition, placing the circle in front is equivalent to clearrect to clear the text.

We don't know how to solve this problem.

Read the original article: 10 minutes, draw a small loading interface using canvas