一、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. BZOJ 3110 k大数查询 & 树套树

    题意: 有n个位置,每个位置可以看做一个集合,现在要求你实现一个数据结构支持以下功能: 1:在a-b的集合中插入一个数 2:询问a-b集合中所有元素的第k大. SOL: 调得火大! 李建说数据结构题能 ...

  2. 通过Spring Mail Api发送邮件

    使用Java Mail API来发送邮件也很容易实现,但是最近公司一个同事封装的邮件API实在让我无法接受,于是便打算改用Spring Mail API来发送邮件,顺便记录下这篇文章. [Spring ...

  3. Android -----listView的属性大全

    http://www.cnblogs.com/zhengbeibei/archive/2013/03/29/2988814.html 01     <?xml version="1.0 ...

  4. ACM: hdu 2647 Reward -拓扑排序

    hdu 2647 Reward Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Des ...

  5. 转载：冷门js技巧

    前端已经被玩儿坏了!像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了,像用||操作符给变量赋默认值也是人尽皆知的旧闻了,今天看到Quora上一个帖子,瞬间又GET了好多前 ...

  6. 【BZOJ2038】【2009国家集训队】小Z的袜子(hose) 分块+莫队

    Description 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过程,于是他决定听天由命……具体来说,小Z把这N只袜 ...

  7. MyBatis调用存储过程，含有返回结果集、return参数和output参数

    Ibatis是我们经常使用的O/R映射框架,mybats是ibatis被Google收购后重新命名的一个工程,当然也做了大量的升级.而调用存储过程也是一次额C/S架构模式下经常使用的手段,我们知道,i ...

  8. oracle中number类型的数据使用as string 得到的值为null

    1,如果数据的运行时类型(和数据库字段类型相同)不是字符串类型,比如number/date等,将ds.Tables[0].Rows[i][j] 调用 as string 时,不管 这个字段是否有值,这 ...

  9. ./*** > /dev/null 2>&1

    转载:http://dongwei.iteye.com/blog/322702 shell中可能经常能看到:>/dev/null 2>&1 命令的结果可以通过%>的形式来定义 ...

  10. cmd 更改字体

    HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Console\TrueTypeFont,在右面找到936值双击打开,数 ...