`
128kj
  • 浏览: 584862 次
  • 来自: ...
社区版块
存档分类
最新评论

HTML5 绕四边运动的文字动画

html5htmljavascriptcanvas 
阅读更多
点击这里可以看动画效果：
http://www.108js.com/article/article3/zip1/30229/Test.html
效果图：


代码：
<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> 
 var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var width=canvas.width;
    var  height=canvas.height;
    var  point_size=25;
    var  message="绕四边运动的文字!";
    var  char_array=[];
    var offset_x=[];
    var offset_y=[];
    
    var y1=height-point_size;
       var x1=point_size;
    var loop;
    var dir=["up","right","down","left"];
    var index=0;
    function init()
    {      
     length=message.length;
     char_array=message.split("")
     loop = setInterval(function () { 
         update(dir[index]);
         paint();
        
     }, 500); 
    }
	
   function update(direct)
   {
      switch(direct){     
        case "up":       
          var  j=-1;
          for(var i=0;i<length;i++){
            if(y1+i*point_size>height-point_size){
              if(j<0)
                j=i;
              offset_y[i]=height-point_size;
              offset_x[i]=(i-j+2)*point_size;
            }
            else{
              offset_y[i]=y1+i*point_size;
              offset_x[i]=point_size;
            }
          }
          if(y1>point_size) y1-=point_size;
          else  index++;
          break;
      case "right" :
        j=-1;
        for(i=0;i<length;i++){
          if(x1-i*point_size<point_size*2){
           if(j<0)
             j=i;
           offset_y[i]=(i-j+1)*point_size;
           offset_x[i]=point_size;
          }
         else{
           offset_y[i]=point_size;
           offset_x[i]=x1-i*point_size;
         }
       }
       if(x1<width-point_size)
          x1+=point_size;
       else
         index++;
       break;
     case "down":
       j=-1;
       for( i=0;i<length;i++){
         if(y1-i*point_size<point_size){
           if(j<0)
             j=i;
          offset_y[i]=point_size;
          offset_x[i]=width-(i-j+2)*point_size;
        }
       else{
         offset_y[i]=y1-i*point_size;
         offset_x[i]=width-point_size;
       }
     }
     if(y1<height-point_size) y1+=point_size;
      else
        index++;
     break;
     case "left":
       j=-1;
       for(i=0;i<length;i++){
         if(x1+i*point_size>width-point_size*2){
           if(j<0)
             j=i;
           offset_y[i]=height-(i-j+1)*point_size;
           offset_x[i]=width-point_size;
         }
        else{
          offset_y[i]=height-point_size;
          offset_x[i]=x1+i*point_size;
        }
      }
      if(x1>point_size) x1-=point_size;
      else{
        index=0;
        y1=height-point_size;
        x1=point_size;
     }
     break;
  }                     
 }
	
  function paint(){
      context.font = '25px Palatino';
      context.clearRect(0,0,width,80);
      context.clearRect(width-80,0,80,height);
      context.clearRect(0,height-80,width,80);
      context.clearRect(0,0,80,height);
      context.strokeStyle = 'blue';
      for(var i=0;i<message.length;i++){
          context.strokeText(char_array[i],offset_x[i],offset_y[i]);
          context.fillText(char_array[i],offset_x[i],offset_y[i]);
        }
        context.font = '100px Palatino';    
         context.strokeText("HTML5 动画",width/10,2*height/3);
  }
   window.onload=init;

</script>
</html>
全部代码请下载。
热情奉献：HTML5 Canvas绘图与动画学习59例源码
http://www.108js.com/example.html
  • 大小: 14.2 KB
0
顶
0
踩
分享到：
| HTML5 推箱子游戏过关演示动画
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics