Home > Developer > Web Develop
First, the HTML code:
<!DOCTYPE HTML> <HTML> <Head> <title>Matrix TEXT-HTML5 Canvas Demo</title> <Scripttype= "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><Bodyonload= "init ();"> <CanvasID= "Thematrix"width= "The "Height= "$"> <P>Your Browser doesn ' t support canvas ... L0z3r</P> </Canvas></Body></HTML>
Second, JS code:
varTextstrip = [' 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 ']; varStripcount=90, stripx=NewArray (), stripy=NewArray (), dy=NewArray (), stripfontsize =NewArray (); for(vari = 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; } varThecolors = [' #cefbe4 ', ' #81ec72 ', ' #5cd646 ', ' #54d13c ', ' #4ccc32 ', ' #43c728 ']; varElem, context, timer;functionDrawstrip (x, y) { for(vark = 0; K <= 20; k++) { varRandchar = Textstrip[math.floor (Math.random () *Textstrip.length)]; if(context.filltext) {Switch(k) { Case0: Context.fillstyle= Thecolors[0]; Break; Case1: Context.fillstyle= Thecolors[1]; Break; Case3: Context.fillstyle= Thecolors[2]; Break; Case7: Context.fillstyle= Thecolors[3]; Break; Case13: Context.fillstyle= Thecolors[4]; Break; Case17: Context.fillstyle= Thecolors[5]; Break; } context.filltext (Randchar, x, y); } y-=Stripfontsize[k]; } } functionDraw () {//clear the canvas and set the propertiesContext.clearrect (0, 0, Elem.width, elem.height); Context.shadowoffsetx= Context.shadowoffsety = 0; Context.shadowblur= 8; Context.shadowcolor= ' #94f475 '; for(varj = 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]); } ElseDrawstrip (Stripx[j], stripy[j]); STRIPY[J]+=Dy[j]; } } functioninit () {//get the canvas ' IDElem = document.getElementById (' Thematrix ')); if(!elem | |!elem.getcontext)return; //get the canvas ' contextcontext = Elem.getcontext (' 2d '); if(!context)return; Timer= SetInterval (' Draw () ', 70); }
HTML5 Canvas Drawing Text animations (custom fonts using CSS)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
