一、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. 移动端H5页面之iphone6的适配(转)

    iphone6 及 iphone 6 plus 已经出来一段时间了.很多移动端网站,以前写死body 为320px的,现在估计也忙着做适配了. 大屏幕手机其实一直有,只是以前大家没怎么重视,移动端的H ...

  2. Android中使用Handler造成内存泄露

    1.什么是内存泄露? Java使用有向图机制,通过GC自动检查内存中的对象(什么时候检查由虚拟机决定),如果GC发现一个或一组对象为不可到达状态,则将该对象从内存中回收.也就是说,一个对象不被任何引用 ...

  3. [知识点]Trie树和AC自动机

    // 此博文为迁移而来,写于2015年5月27日,不代表本人现在的观点与看法.原始地址:http://blog.sina.com.cn/s/blog_6022c4720102w1s8.html 1.前 ...

  4. POJ 1279 Art Gallery(半平面交)

    题目链接 回忆了一下,半平面交,整理了一下模版. #include <cstdio> #include <cstring> #include <string> #i ...

  5. URAL 1346. Intervals of Monotonicity(DP)

    题目链接 错误的贪了一下,然后D了两下就过了.注意是不上升和不下降..不是上升和下降.. #include <cstring> #include <cstdio> #inclu ...

  6. 【BZOJ2821】作诗(Poetize) 分块

    Description 神犇SJY虐完HEOI之后给傻×LYD出了一题:SHY是T国的公主,平时的一大爱好是作诗.由于时间紧迫,SHY作完诗之后还要虐OI,于是SHY找来一篇长度为N的文章,阅读M次, ...

  7. 【CodeVS】 p1225 八数码难题

    题目描述 Description Yours和zero在研究A*启发式算法.拿到一道经典的A*问题,但是他们不会做,请你帮他们.问题描述 在3×3的棋盘上,摆有八个棋子,每个棋子上标有1至8的某一数字 ...

  8. 51nod算法马拉松12

    A 第K大区间 不妨考虑二分答案x,则问题转化成计算有多少个区间满足众数出现的次数>=x. 那么这个问题我们使用滑动窗口,枚举右端点,则左端点肯定单调递增,然后维护一个简单的数组就能资瓷添加元素 ...

  9. C# Double保留小数点后面位数

    C# Double保留小数点后面位数 有的时候我们要对一些数据进行百分比的操作.一般的数据我们只要用 .ToString("P")就可以得到小数点后2位的百分比.而且是自动 加上% ...

  10. hdu1251 字典树or map

    一道字典树的题,不过看起来用map更为简单 传送门 题意: 给出一堆字符串构成一个字典,求字典里以某字符串为前缀的字符串有几个 思路: 输入字符串时把字符串的前缀全部存进map并标记次数 查询时直接输 ...