Comments: This article describes how to use html5 to create a loading graph. For more information, see
The Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Title> </title>
</Head>
<Body>
<Canvas id = "canvas"> </canvas> </p> <script>
Var Loading = function (canvas, options ){
This. canvas = document. getElementById (canvas );
This. options = options;
}; </P> <p> Loading. prototype = {
Constructor: Loading,
Show: function (){
Var canvas = this. canvas,
Begin = this. options. begin,
Old = this. options. old,
LineWidth = this. options. lineWidth,
CanvasCenter = {x: canvas. width/2, y: canvas. height/2 },
Ctx = canvas. getContext ("2d "),
Color = this. options. color,
Num = this. options. num,
Angle = 0,
LineCap = this. options. lineCap,
CONST_PI = Math. PI * (360/num)/180;
Window. timer = setInterval (function (){
Ctx. clearRect (0, 0, canvas. width, canvas. height );
For (var I = 0; I <num; I + = 1 ){
Ctx. beginPath ();
Ctx. strokeStyle = color [num-1-I];
Ctx. lineWidth = lineWidth;
Ctx. lineCap = lineCap;
Ctx. moveTo (canvasCenter. x + Math. cos (CONST_PI * I + angle) * begin, canvasCenter. y + Math. sin (CONST_PI * I + angle) * begin );
Ctx. lineTo (canvasCenter. x + Math. cos (CONST_PI * I + angle) * old, canvasCenter. y + Math. sin (CONST_PI * I + angle) * old );
Ctx. stroke ();
Ctx. closePath ();
}
Angle + = CONST_PI;
Console. log (angle)
}, 50 );
},
Hide: function (){
ClearInterval (window. timer );
}
}; </P> <p> (function (){
Var options = {
Num: 8,
Begin: 20,
Old: 40,
LineWidth: 10,
LineCap: "round ",
Color: ["rgb (0, 0, 0)", "rgb (20, 20, 20)", "rgb (40, 40, 40 )", "rgb (60, 60, 60)", "rgb (80, 80, 80)", "rgb (100,100,100)", "rgb (120,120,120 )", "rgb (1, 140,140,140)"]
};
Var loading = new Loading ("canvas", options );
Loading. show ();
}());
</Script>
</Body>
</Html>
:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
