`

HTML5 绕四边运动的文字动画

    博客分类：
  • Html
html5htmlJavaScript 
阅读更多

点击这里可以看动画效果： 
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> 

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

分享到：
| PHPnow 搭建 PHP
评论
发表评论

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

相关推荐

    三角面转四边面

    轻松清除三角面 三角面转四边面 三角面转四边面

    四边圆环图.zip

    四边圆环图是一种独特的数据可视化工具，常用于呈现四个主要分类或部分的数据比例关系。在Excel等电子表格软件中，这种图表可以帮助用户直观地理解各个分类在整体中所占的比例，尤其适用于比较和分析不同因素对整体...

    椭圆齿轮-异性齿轮-三角+四边+六边型齿轮动画

    椭圆齿轮-异性齿轮-三角+四边+六边型齿轮动画

    四边面工具_v0.13.1.zip

    《SketchUp四边面工具——高效三维建模的利器》 在三维建模的世界里，SketchUp是一款广受欢迎的软件，其简洁的界面和强大的功能深受设计师们的喜爱。而四边面工具（QuadFaceTools）作为SketchUp的一款插件，为用户...

    Arduino智能小车四边行运动程序源代码.rar

    该程序源代码用于Arduino智能小车四边行运动实验。 1、源代码开发软件：Arduino IDE； 2、程序对应处理器是：ATMEGA328P； 3、智能小车电机驱动芯片是：L293D； 4、智能小车电机为：TT直流减速电机； 该程序源代码在...

    一种无线传感器网络四边测距定位算法

    本文主要关注的是其中的一种定位算法——四边测距定位算法，这种算法尤其适用于那些需要精确位置信息的WSN应用场景。 传统的定位方法包括基于RSSI（Received Signal Strength Indicator）的测距定位、基于TOA（Time...

    测绘应用程序 测绘专业进行四边闭合控制测量的软件

    "5边闭合C.txt"和"4边闭合C.txt"可能包含的是针对不同闭合图形（五边形和四边形）的控制测量数据。在实际操作中，可能会使用多边形闭合来提高测量的可靠性。"测绘1.0.cpp"文件表明这个软件可能采用C++编程语言开发，...

    C#源码 无边框窗体 winform特效，四边阴影，圆角，淡入淡出效果

    e.Graphics.FillRectangle(brush, this.ClientRectangle.Inflate(-5, -5)); } } ``` 至于圆角效果，可以使用`Region`属性来指定窗体的形状。`GraphicsPath`对象可以用来创建一个带有圆角的矩形路径，然后将这个...

    玩转BLENDER 3D动画角色创作

    在建模过程中，理解网格的拓扑结构和保持模型的“四边面”原则对于后续的动画制作至关重要。 然后，角色的纹理和材质也是角色形象的重要组成部分。BLENDER内置的UV映射工具可以帮助你展开模型的表面，进行纹理绘制...

    EXCEL报表圆环图-9-圆环图（四边）.xlsx

    EXCEL报表圆环图-9-圆环图（四边）.xlsx

    模拟_四边简支；Mindlin_简支板_

    标题中的“模拟_四边简支；Mindlin_简支板_”指的是在工程领域，尤其是结构力学中，对一种特定边界条件下的Mindlin板进行的数值模拟研究。Mindlin板理论是板壳理论的一种，它考虑了板的剪切变形和转动效应，相比经典...

    微课设计与开发-ae转场动画

    转场一：光圈式开合转场：四边（三角形）+位置关键帧。 转场二：不规则填充转场：圆形+描边动画+中继器+毛边 转场三：百页窗式转场：矩形缩放动画（中心点+x轴缩放）+三维图层 转场四：路径变换转场：矩形+转换...

    四边面自动重布线拓扑Exoside QuadRemesher 1.0 3ds Max.rar

    四边面（quad）作为最理想的拓扑结构，因其对渲染和动画的友好性而被广泛推崇。Exoside QuadRemesher 1.0 是一款专为3ds Max设计的插件，它能自动化地将模型的拓扑结构转换为均匀的四边面网格，极大地提升了工作效率...

    C# 窗体四边阴影_C#窗体四边阴影_

    g.FillRectangle(new SolidBrush(Color.Gray), new Rectangle(-5, -5, Width + 10, Height + 10)); } ``` 4. **处理窗体移动和大小调整**： 当窗体移动或调整大小时，需要重新绘制阴影。为此，我们需要在`...

    HTML5&CSS3网页制作：边框属性.pptx

    HTML5与CSS3网页制作中的边框属性 边框属性是CSS中用于设置网页元素边框的样式、宽度和颜色的属性。边框属性可以分为三个部分：边框样式（border-style）、边框宽度（border-width）和边框颜色（border-color）。 ...

    C# 窗体四边阴影 源码

    C#开发的窗体实现四边阴影效果 压缩包内有源码

    行业分类-外包设计-四边封包装机的说明分析.rar

    首先，四边封包装机的工作原理是通过连续或间歇式的运动模式，将预先裁剪好的包装膜经过成型、填充、封口和切割等步骤，形成一个完全密封的包装袋。在这个过程中，包装膜的四个边缘都会被热封，确保了包装的密封性和...

    winform 窗体四边阴影.zip

    在Windows Forms（WinForm）开发中，为窗体添加四边阴影可以提升应用程序的视觉效果，使其看起来更加现代化。本文将深入探讨如何在WinForm应用中实现这一功能，主要涉及以下知识点： 1. **基本原理**：WinForm窗体...

    科普介绍-Blender三维动画制作软件.docx

    5. 文字文本对象：创立一个二维的字符串。 6. 骨骼：用于绑定 3D 模型以便它们能摆出 Pose 和做出动作。 7. 空对象：空的物体，是简单的视觉变换节点但不可被渲染。 8. 相机：虚拟相机常常用来确定渲染的区域。 9. ...

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