一、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. Motion images compression and restoration based on computer vision

    This technique should apply to both normal video (consequtive sequences of pictures of real world) a ...

  2. BZOJ3636: 教义问答手册

    Description “汉中沃野如关中,四五百里烟蒙蒙.黄云连天夏麦熟,水稻漠漠吹秋风.”——摘自 黄裳<汉中行>“泉岭精神不朽,汉中诸球永生.”——摘自<泉岭精神创立者语录> ...

  3. ECMAScript中关于如何获取this的定义

    文章中一些名词的翻译存疑,没有查过正式的中文名称 前面都是具体过程的解释,懒得看可以直接看获取思路 有关this的取值请移步JavaScript笔记--this的取值 获取this的过程 Runtim ...

  4. Android常用功能代码块

    1.设置activity无标题,全屏 // 设置为无标题栏 requestWindowFeature(Window.FEATURE_NO_TITLE); // 设置为全屏模式 getWindow(). ...

  5. linux下转换U盘文件系统

    打算在windows 7 下复制一个12G 的文件至U盘,无奈U盘为FAT32格式,最大支持移动4G 的文件,只能将U盘文件系统格式化为NTFS.windows 7系统出现问题,转化中总是出现错误.故 ...

  6. asp.net 网站开发流程总结

    由于这学期要做asp.net的网站开发,导师让我们在前期做详细的计划说明,时间安排.由于网站开发流程不知道,以及需要学什么指示都是盲懂,所以计划安排需在了解大致流程之后才能做出来,一下是询问同学和在网 ...

  7. Tree树形结构案例+源码

    上次用到Tree结构,自己不知道写,就在网上找了几个相对较好的tree小案例,留着自己用,希望也能帮到你 下面是案例的一些图片,压缩文件已近上传至博客当和百度云中. 下载链接:http://pan.b ...

  8. css重新认识(2)

    1)行内元素可以用margin-left与margin-right调整位置,但用margin-top与margin-bottom来调整位置不会有效果,只有具有block属性值后才能像块级元素般被外边距 ...

  9. chrome 优秀的插件推荐

    就本人使用过的chrome插件推荐下: 1:Adblock Plus 免费的广告拦截器,可阻止所有烦人的广告及恶意软件和跟踪. 2:ChaZD 英文翻译,妈妈再也不用担心我英文看不懂了,ChaZD 查 ...

  10. 配置非默认端口的监听Listener