10分钟，利用canvas画一个小的loading界面

首先利用定义下canvas得样式

1. <canvas width="1024" height="720" id="canvas" style="border: 1px solid #808080;display: block;margin: 100px auto;>你的游览器不支持canvas</canvas>

复制代码

这里主要要说的就是宽高，不要在style里面定义，不然会被拉伸。（对于这点，建议大家看下W3c文档，不是很懂）


高度和宽度属性确定画布的宽度和高度的坐标系统，而CSS属性只确定大小的盒子，它会显示。

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

复制代码

获取对象，然后获取上下文进行画图。


好的，接下来来个小例子（画弧）

1. //设置线宽，颜色（我喜欢通俗的称他为空心画法）
   
2.         ctx.lineWidth = 2;
   
3.         ctx.strokeStyle = '#17**5';
   
4.        //arc是花弧形，如果用fill的画法的话，会把他封闭起来。
   
5.         ctx.beginPath();
   
6.         ctx.arc(512, 360, 100, 0.5 * Math.PI, 1 * Math.PI);
   
7.         ctx.stroke();
   
8.         ctx.closePath();

复制代码

对于ctx.beginPath();和 ctx.closePath();我觉得是canvas灵魂，一些好的canvas的引擎之所以效率高，他们有很大程度的关系。

1.比如，有些人画的感觉画出来的canvas是带有锯齿状，就是在画布上，绘制了同样一件事情N次之后的效果。

看下面一个例子

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

复制代码

这就是ctx.closePath();的作用，闭合那些线，但是fill的画法默认是带有ctx.closePath();这个功能的，而ctx.beginPath();的作用就是相当于函数中的分割了，分割作用域。

2.例子就举上面的，如果将上面两段代码何必，去掉ctx.beginPath();，那么那段弧形会被绘制两次，而第二个则绘制一次。言下之意就是，假如没有ctx.beginPath();的话，代码中要绘制100个图片，第一个就会绘制100次，第一个99次，总而言之是100+99+98+。。。。。

3.接下来两个小例子。
      

1. //定义一个渐变的颜色，其实坐标，x，y，w，h
   
2.         var color = ctx.createLinearGradient(512, 460, 512, 260);
   
3.       // 开始颜色，和结束的颜色
   
4.         color.addColorStop(0, '#499989');
   
5.         color.addColorStop(1, '#17**5');
   
6. 
   
7.         ctx.beginPath();
   
8.         ctx.fillStyle = color;
   
9.         ctx.arc(512, 360, 99, 0, 2 * Math.PI);
   
10.         ctx.fill();
    
11.         ctx.closePath();
    
12. 
    
13.         //绘制文本
    
14.         var a = 12;
    
15.         ctx.font="50px Arial";
    
16.         ctx.fillStyle = "#fff";
    
17.       //居中
    
18.         ctx.textAlign = "center";
    
19.         ctx.beginPath();
    
20.    //文字内容， 起始坐标，宽度
    
21.         ctx.fillText(a, 510, 375 , 64);
    
22.         ctx.closePath();

复制代码

4.接下来我们把上面内容结合起来。

1. //定时器
   
2.         var timeClear;
   
3.         //定义一些数字
   
4.         var arcNum = 0.02,
   
5.                 textNum = 1;
   
6. 
   
7.         function load1(){
   
8. 
   
9.             if(textNum >= 101){
   
10.                 return 0;
    
11.             }
    
12. 
    
13.             ctx.lineWidth = 2;
    
14.             ctx.strokeStyle = '#17**5';
    
15. 
    
16.             ctx.beginPath();
    
17.             ctx.arc(512, 360, 100, (0.5 + arcNum - 0.02) * Math.PI, (0.5 + arcNum) * Math.PI);
    
18.             ctx.stroke();
    
19.             ctx.closePath();
    
20. 
    
21.             //绘制里面的渐变颜色
    
22.             var color = ctx.createLinearGradient(512, 460, 512, 260);
    
23.             color.addColorStop(0, '#499989');
    
24.             color.addColorStop(1, '#17**5');
    
25. 
    
26.             ctx.beginPath();
    
27.             ctx.fillStyle = color;
    
28.             ctx.arc(512, 360, 99, (0.5 - arcNum/2)* Math.PI, (0.5 + arcNum/2) * Math.PI);
    
29.             ctx.fill();
    
30.             ctx.closePath();
    
31. 
    
32.             //绘制文本
    
33.             ctx.font="80px Arial";
    
34.             ctx.fillStyle = "#fff";
    
35.             ctx.textAlign = "center";
    
36.             ctx.beginPath();
    
37.             ctx.fillText(textNum, 510, 385 , 124);
    
38.             ctx.closePath();
    
39.             //ctx.clearRect(0,0,1024,720);
    
40. 
    
41. 
    
42.             arcNum = arcNum + 0.02;
    
43.             textNum = textNum + 1;
    
44. 
    
45.         }
    
46. 
    
47.         timeClear = setInterval(load1, 60);
    
48. 
    

复制代码

看起来不太舒服，建议自己在电脑上测试

http://www.gbtags.com/gb/debug/7400a9ba-51a7-409b-b1f4-b01363b9c625.htm

一个简单的loading写完了，但是里面有很多问题，比如那个fill和text都是有部分重复的绘制，绘制了99次的，其实我主要想用fill那个圆来取代每次画好的文本还要clear。如果你把文字换种颜色可能明白我的意思了。然后这会导致底部绘制100次，导致底部出现锯齿的样子。

而且，绘制圆放在前面，就是相当于clearRect的作用，去清除文字。