新闻中心

EEPW首页>专题> HTML 5如何实现缓冲效果

HTML 5如何实现缓冲效果

作者： 时间：2012-09-12 来源：51CTO 收藏

HTML5在移动设备上表现，相信已经不用我多说了，干掉了Flash之后，它已经坐上了移动应用程序的第一把交椅。几乎所有稍微高端一点的设备(乔帮主的iPad，iPhone和Andriod的平板手机等)的浏览器都支持HTML5，而且据权威人士测试，这些支持HTML5的设备对Canvas标签的支持也是相当的好。

本文引用地址：//m.amcfsurvey.com/article/136716.htm

　　大家都知道Web2.0以来，应用程序的实现使用了大量Ajax，而Loading的小图标也有很多，甚至还有专门提供Loading图片的网站，所以我就想能不能让HTML5一并解决这个以前用gif文件才能解决的问题。出乎我意料的是，实现的过程非常简单，只用了不到一小时的时间我就用HTML5实验出了两个Loading效果，而且这样做出来的Loading图标是可定制的，既可以定制颜色，也可以定制大小等属性。

　　第一个带着小尾巴转动的loading图标画图的思路是，首先画一个圆，然后在圆的边上按顺序画大小逐渐减小的小圆点，在每次刷新画布时改变这一系列的小圆点在大圆边上的位置。

　　这里是案例的演示代码：

        
    
         
  1. >
    2. 
         
  2. <html>
    3. 
         
  3. <head>
    4. 
         
  4. <metahttp-equiv="content-type"content="GBK"/>
    5. 
         
  5. <title>loadingtitle>
    6. 
         
  6. <scripttype="text/javascript">
    7. 
         
  7. function loading(canvas,options){
    8. 
         
  8. this.canvas= canvas;
    9. 
         
  9. if(options){
    10. 
         
  10. this.radius=options.radius||12;
    11. 
         
  11. this.circleLineWidth=options.circleLineWidth||4;
    12. 
         
  12. this.circleColor=options.circleColor||'lightgray';
    13. 
         
  13. this.dotColor=options.dotColor||'gray';
    14. 
         
  14. }else{
    15. 
         
  15. this.radius=12;
    16. 
         
  16. this.circelLineWidth=4;
    17. 
         
  17. this.circleColor='lightgray';
    18. 
         
  18. this.dotColor='gray';
    19. 
         
  19. }
    20. 
         
  20. }
    21. 
         
  21. loading.prototype= {
    22. 
         
  22. show:function (){
    23. 
         
  23. varcanvas=this.canvas;
    24. 
         
  24. if(!canvas.getContext)return;
    25. 
         
  25. if(canvas.__loading)return;
    26. 
         
  26. canvas.__loading=this;
    27. 
         
  27. varctx=canvas.getContext('2d');
    28. 
         
  28. varradius=this.radius;
    29. 
         
  29. varrotators= [{angle:0,radius:1.5},{angle:3/radius,radius:2},{angle:7/radius,radius:2.5},{angle:12/radius,radius:3}];
    30. 
         
  30. varme=this;
    31. 
         
  31. canvas.loadingInterval=setInterval(function(){
    32. 
         
  32. ctx.clearRect(0,0,canvas.width,canvas.height);
    33. 
         
  33. varlineWidth=me.circleLineWidth;
    34. 
         
  34. varcenter= {x:canvas.width/2 - radius,y:canvas.height/2-radius};
    35. 
         
  35. ctx.beginPath();
    36. 
         
  36. ctx.lineWidth= lineWidth;
    37. 
         
  37. ctx.strokeStyle=me.circleColor;
    38. 
         
  38. ctx.arc(center.x,center.y,radius,0,Math.PI*2);
    39. 
         
  39. ctx.closePath();
    40. 
         
  40. ctx.stroke();
    41. 
         
  41. for(vari=0;i<rotators.length;i++){
    42. 
         
  42. varrotatorAngle=rotators[i].currentAngle||rotators[i].angle;
    43. 
         
  43. //在圆圈上面画小圆
    44. 
         
  44. varrotatorCenter= {x:center.x-(radius)*Math.cos(rotatorAngle) ,y:center.y-(radius)*Math.sin(rotatorAngle)};
    45. 
         
  45. varrotatorRadius=rotators[i].radius;
    46. 
         
  46. ctx.beginPath();
    47. 
         
  47. ctx.fillStyle=me.dotColor;
    48. 
         
  48. ctx.arc(rotatorCenter.x,rotatorCenter.y,rotatorRadius,0,Math.PI*2);
    49. 
         
  49. ctx.closePath();
    50. 
         
  50. ctx.fill();
    51. 
         
  51. rotators[i].currentAngle=rotatorAngle+4/radius;
    52. 
         
  52. }
    53. 
         
  53. },50);
    54. 
         
  54. },
    55. 
         
  55. hide:function(){
    56. 
         
  56. varcanvas=this.canvas;
    57. 
         
  57. canvas.__loading=false;
    58. 
         
  58. if(canvas.loadingInterval){
    59. 
         
  59. window.clearInterval(canvas.loadingInterval);
    60. 
         
  60. }
    61. 
         
  61. varctx=canvas.getContext('2d');
    62. 
         
  62. if(ctx)ctx.clearRect(0,0,canvas.width,canvas.height);
    63. 
         
  63. }
    64. 
         
  64. };
    65. 
         
  65. script>
    66. 
         
  66. head>
    67. 
         
  67. <body>
    68. 
         
  68. <canvasid="canvas"width="300"height="100"style="border:1px solid #69c">canvas>
    69. 
         
  69. <p>
    70. 
         
  70. <inputtype="button"onclick="loadingObj.hide()"value="HideLoading"/>
    71. 
         
  71. <inputtype="button"onclick="loadingObj.show()"value="showLoading"/>
    72. 
         
  72. style>
    73. 
         
  73. <p>
    74. 
         
  74. <script>
    75. 
         
  75. varloadingObj=newloading(document.getElementById('canvas'),{radius:8,circleLineWidth:3});
    76. 
         
  76. loadingObj.show();
    77. 
         
  77. script>
    78. 
         
  78. body>
    79. 
         
  79. html>
    80.

　　第二个较为简单，在一个圆环上有一个相同圆心相同半径的圆弧在不停的转动。画图的步骤是首先画一个圆环，然后画一个不同颜色相同圆心半径的圆弧，在每次刷新画布时改变圆弧的起始角度。

　　这里是案例的演示代码：

  1. >
  2. <html>
  3. <head>
  4. <metahttp-equiv="content-type"content="text/html;charset=gbk"/>
  5. <title>loadingtitle>
  6. <script>
  7. /*
  8. html5 loading 控件
  9. 作者：玉开 博客：http://www.cnblogs.com/yukaizhao/
  10. 发布或使用此控件，请保留作者声明
  11. */
  12. function loading(canvas,options){
  13. this.canvas= canvas;
  14. if(options){
  15. this.radius=options.radius||12;
  16. this.circleLineWidth=options.circleLineWidth||4;
  17. this.circleColor=options.circleColor||'lightgray';
  18. this.moveArcColor=options.moveArcColor||'gray';
  19. }else{
  20. this.radius=12;
  21. this.circelLineWidth=4;
  22. this.circleColor='lightgray';
  23. this.moveArcColor='gray';
  24. }
  25. }
  26. loading.prototype= {
  27. show:function (){
  28. varcanvas=this.canvas;
  29. if(!canvas.getContext)return;
  30. if(canvas.__loading)return;
  31. canvas.__loading=this;
  32. varctx=canvas.getContext('2d');
  33. varradius=this.radius;
  34. varme=this;
  35. varrotatorAngle=Math.PI*1.5;
  36. varstep=Math.PI/6;
  37. canvas.loadingInterval=setInterval(function(){
  38. ctx.clearRect(0,0,canvas.width,canvas.height);
  39. varlineWidth=me.circleLineWidth;
  40. varcenter= {x:canvas.width/2 - radius,y:canvas.height/2-radius};
  41. ctx.beginPath();
  42. ctx.lineWidth= lineWidth;
  43. ctx.strokeStyle=me.circleColor;
  44. ctx.arc(center.x,center.y,radius,0,Math.PI*2);
  45. ctx.closePath();
  46. ctx.stroke();
  47. //在圆圈上面画小圆
  48. ctx.beginPath();
  49. ctx.strokeStyle=me.moveArcColor;
  50. ctx.arc(center.x,center.y,radius,rotatorAngle,rotatorAngle+Math.PI*.45);
  51. ctx.stroke();
  52. rotatorAngle+=step;
  53. },50);
  54. },
  55. hide:function(){
  56. varcanvas=this.canvas;
  57. canvas.__loading=false;
  58. if(canvas.loadingInterval){
  59. window.clearInterval(canvas.loadingInterval);
  60. }
  61. varctx=canvas.getContext('2d');
  62. if(ctx)ctx.clearRect(0,0,canvas.width,canvas.height);
  63. }
  64. };
  65. script>
  66. head>
  67. <body>
  68. <canvasid="canvas"width="300"height="100"style="border:1px solid #69c">您的浏览器不支持html5哟canvas>
  69. <p>
  70. <inputtype="button"onclick="loadingObj.hide()"value="HideLoading"/>
  71. <inputtype="button"onclick="loadingObj.show()"value="showLoading"/>
  72. p>
  73. <script>
  74. varloadingObj=newloading(document.getElementById('canvas'),{radius:8,circleLineWidth:3});
  75. loadingObj.show();
  76. script>
  77. body>
  78. html>

　　目前从移动设备对HTML5的支持来看，HTML5将来必定大有可为。

　　天下大势，合久必分，分久必和。PC开发时Web应用在很大程度上统一了客户端程序;而现在移动开发使用不同的系统不同的语言，将来大多数应用必然会统一到一种语言，这种语言必然是html5加Javascript。

关键词：HTML5

评论


相关推荐

技术专区

关闭