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

首先利用定义下canvas得样式

1. <canvaswidth="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.  //设置线宽，颜色（我喜欢通俗的称他为空心画法）

1. ctx.lineWidth =2;
2. ctx.strokeStyle ='#176785';

1. //arc是花弧形，如果用fill的画法的话，会把他封闭起来。
2. ctx.beginPath();
3. ctx.arc(512,360,100,0.5*Math.PI,1*Math.PI);
4. ctx.stroke();
5. 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();

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

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

3.接下来两个小例子。

1.  //定义一个渐变的颜色，其实坐标，x，y，w，h

1. var color = ctx.createLinearGradient(512,460,512,260);
2. // 开始颜色，和结束的颜色

1. color.addColorStop(0,'#499989');
2. color.addColorStop(1,'#176785');
3.  
4. ctx.beginPath();
5. ctx.fillStyle = color;
6. ctx.arc(512,360,99,0,2*Math.PI);
7. ctx.fill();
8. ctx.closePath();
9.  
10. //绘制文本
11. var a =12;
12. ctx.font="50px Arial";
13. ctx.fillStyle ="#fff";

1. //居中
2. ctx.textAlign ="center";
3. ctx.beginPath();

1. //文字内容， 起始坐标，宽度
2. ctx.fillText(a,510,375,64);
3. ctx.closePath();

 

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

。。。。

。。。。

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

在线调试唯一地址：http://www.gbtags.com/gb/debug/7400a9ba-51a7-409b-b1f4-b01363b9c625.htm

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

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

面对这个问题，不知道大家如何解决的。

阅读原文：10分钟，利用canvas画一个小的loading界面