Canvas do loading animation

Because the company's recent projects are not very busy, so they use their leisure time to study for a while HTM5 and CSS3, coincidentally, the company recently to a unified upgrade of previous projects, and I was told, mainly in the previous version of the Add some page animation. With 4 people involved in the writing of the animation effects, I was fortunate to have been selected.

The first time to do the action or use CSS3, the heart is very excited. Although I am not very understanding of CSS3, but I still have the confidence that they can be qualified for this task. The next 2 months of time, I have been doing CSS3, because I am only good at JavaScript and jquery, the CSS is not very familiar with the knowledge, so, do CSS3 animation is still very laborious. Encountered many problems halfway, I also humbly consulted a lot of colleagues. (the blogger suddenly discovers that I am still very experienced person in the company of the present.) After that short period of nearly 2 months, I have a further understanding of CSS. Just today is the weekend, to tidy up their own use of knowledge. By the way, I did some examples.

Canvas did not use the project this time, but my amateur research. Write the wrong place, but also ask the Master to guide ~

Don't say much nonsense, directly on the effect of the picture:

HTML code:

JavaScript code:

function Loading1 () {    var canvas = document.getElementById ("Loading1"),          CTX = Canvas.getcontext ("2d"),         w = canvas.width,  & nbsp;      h = canvas.height,         x = W/2,  
       y = h/2,         radius = 30;
        Ctx.fillstyle = "#000";

        Ctx.fillrect (0,0,W,H);
        var r = [3,4,4.5,5,6,7];
        var angle = [10,25,45,65,90,120];
        var alpha = [0.25,0.35,0.45,0.65,0.8,1];
        var x1=[],y1=[];
                setinterval (function () {             Ctx.fillstyle = "#000";
            Ctx.fillrect (0,0,W,H);
            x1 = [];
            y1 = [];             for (var i = 0; i < r.length i + +) {  &
nbsp;             if (Angle[i] >= 360) angle[i] = 0;
                Ctx.beginpath ();                 Ctx.font = "1rem
Sans-serif ";                 Ctx.fillstyle = "Rgba (
156,236,255, "+alpha[i]+") ";                 X1.push (x + radius*math.cos (angle[i]*math.pi/180));                 Y1.push (y + radius*
Math.sin (angle[i]*math.pi/180));                 Ctx.arc (X1[i],y1[i],
R[i],0,2*math.pi, True);
                Ctx.closepath ();
                Ctx.fill ();
                Angle[i] + + 5;            }        }
, 25); function IsEmpty (obj) {    var name     for (name in obj) {     
;   return false;
   }     return true; } function loading2 (ARG) {    this.init (arg);} loading2.prototype = {    constructor:loading2,      Init:function (Arg) {        var isconsist =!isempty (ARG);  & nbsp;      This.block = isconsist? Arg.block?
Arg.block:12:12;         this.height = isconsist? Arg.height?
arg.height:15:15;         this.width = isconsist? Arg.width?
Arg.width:3:3;         this.time = isconsist? Arg.time?
arg.time:100:100;                 This.cvs =
document.getElementById (arg.id),         this.ctx = This.cvs.getContext ("2d");
        this.ctx.width = this.height*6;
        this.ctx.height = this.height*6;                 this.ctx.translate (this.ctx.width/
2, THIS.CTX.HEIGHT/2);
        var radius = 2;
        This.view (RADIUS);    },     loop:function (Alpha) {       
This.ctx.rotate (Math.pi*2/this.block);
        This.ctx.beginPath ();
        This.ctx.fillStyle = "Rgba (0,0,0," +alpha+ ")";         This.ctx.arc (0, THIS.CTX.WIDTH/2-THIS.HEIGHT*2,THIS.WIDTH/2, 0, Math.PI
, true);         This.ctx.arc (0, This.ctx.width/2-this.height, THIS.WIDTH/2, Math.PI, 0,
true);
        This.ctx.closePath ();
        This.ctx.fill ();    },     view:function (RADIUS) {&NBSP;&Nbsp;      var that = this;
        this.ctx.rotate (Math.pi*2/this.block);         for (var i = 1; I <= this.block i + +) {     
       This.loop (I/this.block);
       }         settimeout (function () {             That.ctx.clearRect (-THAT.CTX.WIDTH/2,-
THAT.CTX.HEIGHT/2, That.ctx.width, that.ctx.height);             radius >= that.block?
Radius = 1:radius + 1;
            That.view (RADIUS);
       }, That.time);        }}

In the whole JavaScript, I think the most difficult thing to understand is the code in the loop, which is also the focus of drawing in canvas.

First, the canvas object passes through GetContext ("2d"), and returns a context object. All of the canvas objects, such as drawing, rotation, transformation and zooming, are all implemented through the context object.

The canvas object has the width and Height properties, and the default width and height value is 300px; The value can be reset by context.width,context.height;

Canvas Draw a rectangle:

Context.fillrect (x,y,width,height) sets the rectangle to be filled canvas, and fills the rectangle in the phase canvas (X,y) as the starting point, width, and high height. You can set the fill style (CSS) by Context.fillstyle before populating the rectangle;

Canvas Draw Circle:

Context.beginpath (); Start a path, or reset the current path

context.fillstyle;//can set the style to be filled canvas

Context.arc (X,y,radius,startangle,endangle,flag); Radius is the radius of the canvas coordinate point (x,y), the starting radian is startangle, the terminating radian is endangle,flag to bool, and when the flag value is true, the rotation is counterclockwise, when the flag is false, indicates to rotate clockwise;

Context.closepath ();

Context.fill ();//fills the current drawing path;

Canvas rotation rotate:

In the code of the View method in Loading2, useful to the Context.rotate () method, rotate (angle) method is used to rotate the current drawing, receive a parameter, in radians, the rotation angle;

Canvas Remap canvas (0,0) Coordinates:

Context.translate (x,y) means that the upper-left corner of the canvas is translated to the point (X,y);

It is noteworthy that there are

• The radian in canvas indicates that you rotate counterclockwise by default. This is the opposite of the default radian rotation in mathematics;

• Draw arcs. When you draw arcs in canvas, you can draw multiple arcs in Context.beginpath () and Context.closepath (). When the arc is not closed, the drawn arcs are connected to each other. This is how each of the rotated blocks in the loading effect chart is drawn.

Well, the above is my understanding of canvas painting loading, I said not in place, or said inaccurate, incorrect. You are welcome to correct me