一、HTML代码：

<!DOCTYPE html>

 <html>

  <head>

   <title>Matrix Text - HTML5 Canvas Demo</title>

   <script type="text/javascript" src="matrixtext.js"></script>

  <style>

   @font-face

   {

     font-family: 'MatrixCode';

     src: url("matrix code nfi.otf") format("opentype");

    }

  html, body

  {

   background: #000;

   margin: 0;

   padding: 0;

   overflow-x: hidden;

   overflow-y: hidden;

  }

   canvas { font-family: 'MatrixCode'; }

   p

  {

    font-family: 'MatrixCode';

    color: #fff;

   }

  </style>

</head>

<body onload="init();">

  <canvas id="theMatrix" width="1280" height="800"> <p>Your browser doesn't support canvas...L0Z3R</p>

  </canvas>

</body>

</html>

二、JS代码：

var textStrip = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm',

                  'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];

 var stripCount=90, stripX=new Array(), stripY=new Array(), dY=new Array(), stripFontSize = new Array();

 for (var i = 0; i < stripCount; i++) {

    stripX[i] = Math.floor(Math.random()*1265);

    stripY[i] = -100;

    dY[i] = Math.floor(Math.random()*7)+3;

    stripFontSize[i] = Math.floor(Math.random()*24)+12;

 }

 var theColors = ['#cefbe4', '#81ec72', '#5cd646', '#54d13c', '#4ccc32', '#43c728'];

 var elem, context, timer;

 function drawStrip(x, y) {

    for (var k = 0; k <= 20; k++) {

        var randChar = textStrip[Math.floor(Math.random()*textStrip.length)];

        if (context.fillText) {

            switch (k) {

            case 0:

                context.fillStyle = theColors[0]; break;

            case 1:

                context.fillStyle = theColors[1]; break;

            case 3:

                context.fillStyle = theColors[2]; break;

            case 7:

                context.fillStyle = theColors[3]; break;

            case 13:

                context.fillStyle = theColors[4]; break;

            case 17:

                context.fillStyle = theColors[5]; break;

            }

            context.fillText(randChar, x, y);

        }

        y -= stripFontSize[k];

    }

  }

  function draw() {

    // clear the canvas and set the properties

    context.clearRect(0, 0, elem.width, elem.height);

    context.shadowOffsetX = context.shadowOffsetY = 0;

    context.shadowBlur = 8;

    context.shadowColor = '#94f475';

    for (var j = 0; j < stripCount; j++) {

        context.font = stripFontSize[j]+'px MatrixCode';

        context.textBaseline = 'top';

        context.textAlign = 'center';

        if (stripY[j] > 1358) {

            stripX[j] = Math.floor(Math.random()*elem.width);

            stripY[j] = -100;

            dY[j] = Math.floor(Math.random()*7)+3;

            stripFontSize[j] = Math.floor(Math.random()*24)+12;

            drawStrip(stripX[j], stripY[j]);

        } else drawStrip(stripX[j], stripY[j]);

        stripY[j] += dY[j];

    }

  }

  function init() {

    // get the canvas' id

    elem = document.getElementById('theMatrix');

    if (!elem || !elem.getContext) return;

    // get the canvas' context

    context = elem.getContext('2d');

    if (!context) return;

    timer = setInterval('draw()', 70);

  }

HTML5 Canvas绘文本动画（使用CSS自定义字体）的更多相关文章

  1. HTML5 Canvas水波纹动画特效

    HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比如这次介绍的水波纹动画特效.以前我们也分享过一款基于HTML5 WebGL的水波荡漾动画,让 ...

  2. HTML5 Canvas核心技术图形动画与游戏开发 ((美)David Geary) 中文PDF扫描版​

    <html5 canvas核心技术:图形.动画与游戏开发>是html5 canvas领域的标杆之作,也是迄今为止该领域内容最为全面和深入的著作之一,是公认的权威经典.amazon五星级超级 ...

  3. HTML5 Canvas画图与动画学习59例

    HTML5 Canvas画图与动画学习59例 学习HTML5 动画,画图的好资料. HTML5 Canvas画图与动画学习59例

  4. JavaScript 基于HTML5 canvas 获取文本占用的像素宽度

    基于HTML5 canvas 获取文本占用的像素宽度   by:授客 QQ:1033553122 直接上代码   // 获取单行文本的像素宽度 getTextPixelWith(text, fontS ...

  5. html5 canvas在线文本第二步设置（字体边框）等我全部写完，我会写在页面底部

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 八大疯狂的HTML5 Canvas及WebGL动画效果——8 CRAZY ANIMATIONS WITH WEBGL AND HTML5 CANVAS【收藏】

    HTML5, WebGL and Javascript have changed the way animation used to be. Past few years, we can only a ...

  7. CSS 自定义字体

    移动端如何兼容UI给的字体 [toc] 移动端的默认字体 IOS 默认中文字体是Heiti SC 默认英文字体是Helvetica 默认数字字体是HelveticaNeue Android 默认中文字 ...

  8. CSS自定义字体的实现，前端实现字体压缩

    CSS中使用自定义字体,首先需要下载你需要的字体ttf或者otf文件 这里推荐一个网站:http://www.zitixiazai.org/ /********css中********/ @font- ...

  9. css自定义字体----使用外部字体文件

    css外部自定义字体 给大家分享一个使用的css小技巧!记得收藏呀!相信大家在浏览各种网站会见到各种奇形怪状花里胡哨的文字,还有就是一些浏览器兼容性问题,不会支持一些特殊的字体!给大家分享一个极其简单 ...

随机推荐

  1. CSS雪碧，即CSS Sprite 简单的例子

    CSS Sprite生成工具 http://pan.baidu.com/s/1gdGQwiJ 工具可将多幅图片整合一张,并生成CSS. HTML代码 <style> .img{backgr ...

  2. Leetcode Binary Tree Inorder Traversal

    Given a binary tree, return the inorder traversal of its nodes' values. For example:Given binary tre ...

  3. Zepto Code Rush 2014 A. Feed with Candy

    此题用贪心求解, 首先将caramel drop类别的糖果按照高度从小到大排序,如果高度相同,按照重量从小到大排序 将fruit drop类别的糖果按照高度从小到大排序,如果高度相同,按照重量从小到大 ...

  4. [深入浅出WP8.1(Runtime)]应用实例——移动截图

    10.2应用实例——移动截图 移动截图例子是实现一个把一张图片的某个部分截取出来的功能,并且用户可以选定截取的图片区间.那个该例子会使用ManipulationDelta事件来实现对截取区间的选择.然 ...

  5. tomcat、Linux服务器

    tomcat.Linux服务器 用到的命令        解压命令: tar -zxvf 文件名 配置 :        vi /etc/profile                按 i  进入 ...

  6. IOS UINavigationController 导航控制器

    /** 导航控制器掌握: 1.创建导航控制器 UINavigationController *nav = [[UINavigationController alloc] initWithRootVie ...

  7. ng-switch 指令

    <!--标准用法--> <div ng-switch on="showSecret"> <div ng-switch-when="true& ...

  8. JavaScript声明全局变量的三种方式

    JavaScript声明全局变量的三种方式   JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符)的方式在function外部声明,即为 ...

  9. Nodejs正则表达式函数之match、test、exec、search、split、replace使用详解

    1. Match函数 使用指定的正则表达式函数对字符串惊醒查找,并以数组形式返回符合要求的字符串 原型:stringObj.match(regExp) 参数: stringObj 必选项,需要去进行匹 ...

  10. apache中.htaccess不起作用

    找到apache的配置文件httpd.conf文件,找到:  代码如下 复制代码 #LoadModule rewrite_module modules/mod_rewrite.so 去掉前面的#号. ...