一、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. 来自于2016.2.23的flag

    正是中午,百废待兴,写点什么调节一会儿心情吧.正巧有许多的想法. 机房来了许多小朋友,多么像一年之前的我啊,想写题,心又纷乱,但不同的是他们比我强太多了. 停课是什么感觉?停课在机房与寒暑假.双休日在 ...

  2. 如何提升 service 等级，不被kill（整合）

    (1)在应用退到后台后,另起一个只有1像素的页面停留在桌面上,让自己保持前台状态,保护自己不被后台清理工具杀死. (2)用Foreground Service. 参考地址:Android Servic ...

  3. 20161005 NOIP 模拟赛 T2 解题报告

    beautiful 2.1 题目描述 一个长度为 n 的序列,对于每个位置 i 的数 ai 都有一个优美值,其定义是:找到序列中最 长的一段 [l, r],满足 l ≤ i ≤ r,且 [l, r] ...

  4. POJ 1244 Slots of Fun(计算几何)

    题目链接 很简单的一题,数据 很小,直接暴力的.但是也是写也好久,有几个数,没算好...一次CE,一次PE,3Y. #include <iostream> #include <cst ...

  5. 【BZOJ1257】【CQOI2007】余数之和sum

    Description 给出正整数n和k,计算j(n, k)=k mod 1 + k mod 2 + k mod 3 + … + k mod n的值,其中k mod i表示k除以i的余数.例如j(5, ...

  6. BZOJ4515: [Sdoi2016]游戏

    Description Alice 和 Bob 在玩一个游戏. 游戏在一棵有 n 个点的树上进行.最初,每个点上都只有一个数字,那个数字是 123456789123456789. 有时,Alice 会 ...

  7. GO语言练习：switch基本用法

    1.代码 2.运行 1.代码 package main import "fmt" func switch_1(i int){ switch i { : fmt.Println(&q ...

  8. org.openqa.selenium.StaleElementReferenceException

    org.openqa.selenium.StaleElementReferenceException如何解啊.什么原因造成的,貌似有时会出现,有时不会出现

  9. java读取邮件

    package com.zz.mail; import java.io.FileNotFoundException; import java.io.FileOutputStream; import j ...

  10. [CareerCup] 17.13 BiNode 双向节点

    17.13 Consider a simple node-like data structure called BiNode, which has pointers to two other node ...