HTML5 绕四边运动的文字动画

点击这里可以看动画效果: 
http://www.108js.com/article/article3/zip1/30229/Test.html 
效果图: 
HTML5 绕四边运动的文字动画 

代码: 
<html> 
<head> 
    <meta charset="gbk"> 
    <title>HTML5 绕四边运动的文字</title> 
    <link type="text/css" rel="stylesheet" href="css/main.css" /> 

</head> 
<body> 
<div id="wrap"> 
<canvas width="600" height="200" id="myCanvas"></canvas> 

</div> 
<div id="msg1"></div> 
</body> 
<script> 

Java代码   收藏代码
  1. var canvas = document.getElementById('myCanvas');  
  2.    var context = canvas.getContext('2d');  
  3.    var width=canvas.width;  
  4.    var  height=canvas.height;  
  5.    var  point_size=25;  
  6.    var  message="绕四边运动的文字!";  
  7.    var  char_array=[];  
  8.    var offset_x=[];  
  9.    var offset_y=[];  
  10.      
  11.    var y1=height-point_size;  
  12.       var x1=point_size;  
  13.    var loop;  
  14.    var dir=["up","right","down","left"];  
  15.    var index=0;  
  16.    function init()  
  17.    {        
  18.     length=message.length;  
  19.     char_array=message.split("")  
  20.     loop = setInterval(function () {   
  21.         update(dir[index]);  
  22.         paint();  
  23.          
  24.     }, 500);   
  25.    }  
  26.   
  27.   function update(direct)  
  28.   {  
  29.      switch(direct){       
  30.        case "up":         
  31.          var  j=-1;  
  32.          for(var i=0;i<length;i++){  
  33.            if(y1+i*point_size>height-point_size){  
  34.              if(j<0)  
  35.                j=i;  
  36.              offset_y[i]=height-point_size;  
  37.              offset_x[i]=(i-j+2)*point_size;  
  38.            }  
  39.            else{  
  40.              offset_y[i]=y1+i*point_size;  
  41.              offset_x[i]=point_size;  
  42.            }  
  43.          }  
  44.          if(y1>point_size) y1-=point_size;  
  45.          else  index++;  
  46.          break;  
  47.      case "right" :  
  48.        j=-1;  
  49.        for(i=0;i<length;i++){  
  50.          if(x1-i*point_size<point_size*2){  
  51.           if(j<0)  
  52.             j=i;  
  53.           offset_y[i]=(i-j+1)*point_size;  
  54.           offset_x[i]=point_size;  
  55.          }  
  56.         else{  
  57.           offset_y[i]=point_size;  
  58.           offset_x[i]=x1-i*point_size;  
  59.         }  
  60.       }  
  61.       if(x1<width-point_size)  
  62.          x1+=point_size;  
  63.       else  
  64.         index++;  
  65.       break;  
  66.     case "down":  
  67.       j=-1;  
  68.       for( i=0;i<length;i++){  
  69.         if(y1-i*point_size<point_size){  
  70.           if(j<0)  
  71.             j=i;  
  72.          offset_y[i]=point_size;  
  73.          offset_x[i]=width-(i-j+2)*point_size;  
  74.        }  
  75.       else{  
  76.         offset_y[i]=y1-i*point_size;  
  77.         offset_x[i]=width-point_size;  
  78.       }  
  79.     }  
  80.     if(y1<height-point_size) y1+=point_size;  
  81.      else  
  82.        index++;  
  83.     break;  
  84.     case "left":  
  85.       j=-1;  
  86.       for(i=0;i<length;i++){  
  87.         if(x1+i*point_size>width-point_size*2){  
  88.           if(j<0)  
  89.             j=i;  
  90.           offset_y[i]=height-(i-j+1)*point_size;  
  91.           offset_x[i]=width-point_size;  
  92.         }  
  93.        else{  
  94.          offset_y[i]=height-point_size;  
  95.          offset_x[i]=x1+i*point_size;  
  96.        }  
  97.      }  
  98.      if(x1>point_size) x1-=point_size;  
  99.      else{  
  100.        index=0;  
  101.        y1=height-point_size;  
  102.        x1=point_size;  
  103.     }  
  104.     break;  
  105.  }                       
  106. }  
  107.   
  108.  function paint(){  
  109.      context.font = '25px Palatino';  
  110.      context.clearRect(0,0,width,80);  
  111.      context.clearRect(width-80,0,80,height);  
  112.      context.clearRect(0,height-80,width,80);  
  113.      context.clearRect(0,0,80,height);  
  114.      context.strokeStyle = 'blue';  
  115.      for(var i=0;i<message.length;i++){  
  116.          context.strokeText(char_array[i],offset_x[i],offset_y[i]);  
  117.          context.fillText(char_array[i],offset_x[i],offset_y[i]);  
  118.        }  
  119.        context.font = '100px Palatino';      
  120.         context.strokeText("HTML5 动画",width/10,2*height/3);  
  121.  }  
  122.   window.onload=init;  


</script> 
</html> 
全部代码请下载。 
热情奉献:HTML5 Canvas绘图与动画学习59例源码 
http://www.108js.com/example.html

你可能感兴趣的:(JavaScript,html,html5)