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

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 推箱子游戏过关演示动画
评论
发表评论

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

相关推荐

    Word文档怎么设置文字环绕图片 设置方法大全.docx

    - 四周型（Square）：图片四周留有一定空间，文字会围绕图片的四边排列。 - 紧密型（Tight）：图片四周留有的空间较少，文字紧贴图片排列。 - 衬于文字下方（Behind Text）：图片显示在文字下方，但不影响文字的正常...

    三角面转四边面

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

    四边圆环图.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....

    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板理论是板壳理论的一种，它考虑了板的剪切变形和转动效应，相比经典...

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

    在本文中，我们将深入探讨如何在C# WinForm应用程序中实现一种高级的视觉效果，即无边框窗体的四边阴影、圆角以及淡入淡出特效。这些特性能够为用户界面增添现代感和专业性，提升用户体验。首先，让我们了解一下C# ...

    微课设计与开发-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

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

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