首页 > 代码库 > HTML5 Canvas绘文本动画（使用CSS自定义字体）

HTML5 Canvas绘文本动画（使用CSS自定义字体）

2024-08-25 09:55:50   220人阅读

技术分享

一、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自定义字体）


联系
我们