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

gbin1 发布于 2014/07/17 15:27
阅读 1K+
收藏 5

首先利用定义下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.  //设置线宽,颜色(我喜欢通俗的称他为空心画法)
 
 
  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.接下来我们把上面内容结合起来。

 
 
  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 = '#176785';
  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, '#176785');
  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);

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

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

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

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

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

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

加载中
返回顶部
顶部