HTML5 绕四边运动的文字动画

最新推荐文章于 2021-07-26 22:52:07 发布

iteye_8466

最新推荐文章于 2021-07-26 22:52:07 发布

阅读量174

点赞数

分类专栏： HTML5 动画游戏 javascript 文章标签： html5 html javascript canvas ViewUI

HTML5 动画游戏同时被 2 个专栏收录

32 篇文章 1 订阅

订阅专栏

javascript

28 篇文章 0 订阅

订阅专栏

点击这里可以看动画效果：
[url]http://www.108js.com/article/article3/zip1/30229/Test.html[/url]
效果图：
[img]http://dl2.iteye.com/upload/attachment/0096/7143/6617ce15-afff-31a7-8f97-9df3350fde2b.gif[/img]

代码：
<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;