1. 首页
  2. IT资讯

黑客帝国矩阵特效源码

“u003Cdivu003Eu003Cdiv class=”pgc-img”u003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002Fpgc-imageu002F152757803268865202edfcc” img_width=”1265″ img_height=”857″ alt=”黑客帝国矩阵特效源码” inline=”0″u003Eu003Cp class=”pgc-img-caption”u003E效果显示u003Cu002Fpu003Eu003Cu002Fdivu003Eu003Cpu003E<!doctype html>u003Cu002Fpu003Eu003Cpu003E<html lang=”en”>u003Cu002Fpu003Eu003Cpu003E <head>u003Cu002Fpu003Eu003Cpu003E <meta charset=”UTF-8″>u003Cu002Fpu003Eu003Cpu003E <meta name=”Generator” content=”EditPlus®”>u003Cu002Fpu003Eu003Cpu003E <meta name=”Author” content=””>u003Cu002Fpu003Eu003Cpu003E <meta name=”Keywords” content=””>u003Cu002Fpu003Eu003Cpu003E <meta name=”Description” content=””>u003Cu002Fpu003Eu003Cpu003E <title>canvas黑客帝国<u002Ftitle>u003Cu002Fpu003Eu003Cpu003E<meta name=”keywords” content=”” u002F>u003Cu002Fpu003Eu003Cpu003E<meta name=”description” content=”” u002F>u003Cu002Fpu003Eu003Cpu003E <style>u003Cu002Fpu003Eu003Cpu003E*{padding:0;margin:0}u003Cu002Fpu003Eu003Cpu003Ehtml{overflow:hidden}u003Cu002Fpu003Eu003Cpu003E <u002Fstyle>u003Cu002Fpu003Eu003Cpu003E <u002Fhead>u003Cu002Fpu003Eu003Cpu003E <body>u003Cu002Fpu003Eu003Cpu003E<canvas id=”canvas” style=”background:#111″><u002Fcanvas>u003Cu002Fpu003Eu003Cpu003E<script type=”textu002Fjavascript”>u003Cu002Fpu003Eu003Cpu003Ewindow.onload = function(){u003Cu002Fpu003Eu003Cpu003Eu002Fu002F获取画布对象u003Cu002Fpu003Eu003Cpu003Evar canvas = document.getElementById(“canvas”);u003Cu002Fpu003Eu003Cpu003Eu002Fu002F获取画布的上下文u003Cu002Fpu003Eu003Cpu003Evar context =canvas.getContext(“2d”);u003Cu002Fpu003Eu003Cpu003Eu002Fu002F获取浏览器屏幕的宽度和高度u003Cu002Fpu003Eu003Cpu003Evar W = window.innerWidth;u003Cu002Fpu003Eu003Cpu003Evar H = window.innerHeight;u003Cu002Fpu003Eu003Cpu003Eu002Fu002F设置canvas的宽度和高度u003Cu002Fpu003Eu003Cpu003Ecanvas.width = W;u003Cu002Fpu003Eu003Cpu003Ecanvas.height = H;u003Cu002Fpu003Eu003Cpu003Eu002Fu002F每个文字的字体大小u003Cu002Fpu003Eu003Cpu003Evar fontSize = 16;u003Cu002Fpu003Eu003Cpu003Eu002Fu002F计算列u003Cu002Fpu003Eu003Cpu003Evar colunms = Math.floor(W u002FfontSize);u003Cu002Fpu003Eu003Cpu003Eu002Fu002F记录每列文字的y轴坐标u003Cu002Fpu003Eu003Cpu003Evar drops = [];u003Cu002Fpu003Eu003Cpu003Eu002Fu002F给每一个文字初始化一个起始点的位置u003Cu002Fpu003Eu003Cpu003Efor(var i=0;i<colunms;i++){u003Cu002Fpu003Eu003Cpu003Edrops.push(0);u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003Eu002Fu002F运动的文字u003Cu002Fpu003Eu003Cpu003Evar str =”javascript html5 canvas”;u003Cu002Fpu003Eu003Cpu003Eu002Fu002F4:fillText(str,x,y);原理就是去更改y的坐标位置u003Cu002Fpu003Eu003Cpu003Eu002Fu002F绘画的函数u003Cu002Fpu003Eu003Cpu003Efunction draw(){u003Cu002Fpu003Eu003Cpu003Econtext.fillStyle = “rgba(0,0,0,0.05)”;u003Cu002Fpu003Eu003Cpu003Econtext.fillRect(0,0,W,H);u003Cu002Fpu003Eu003Cpu003Eu002Fu002F给字体设置样式u003Cu002Fpu003Eu003Cpu003Econtext.font = “700 “+fontSize+”px 微软雅黑”;u003Cu002Fpu003Eu003Cpu003Eu002Fu002F给字体添加颜色u003Cu002Fpu003Eu003Cpu003Econtext.fillStyle =”#00cc33″;u002Fu002F可以rgb,hsl, 标准色,十六进制颜色u003Cu002Fpu003Eu003Cpu003Eu002Fu002F写入画布中u003Cu002Fpu003Eu003Cpu003Efor(var i=0;i<colunms;i++){u003Cu002Fpu003Eu003Cpu003Evar index = Math.floor(Math.random() * str.length);u003Cu002Fpu003Eu003Cpu003Evar x = i*fontSize;u003Cu002Fpu003Eu003Cpu003Evar y = drops[i] *fontSize;u003Cu002Fpu003Eu003Cpu003Econtext.fillText(str[index],x,y);u003Cu002Fpu003Eu003Cpu003Eu002Fu002F如果要改变时间,肯定就是改变每次他的起点u003Cu002Fpu003Eu003Cpu003Eif(y >= canvas.height && Math.random() > 0.99){u003Cu002Fpu003Eu003Cpu003Edrops[i] = 0;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003Edrops[i]++;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E};u003Cu002Fpu003Eu003Cpu003Efunction randColor(){u003Cu002Fpu003Eu003Cpu003Evar r = Math.floor(Math.random() * 256);u003Cu002Fpu003Eu003Cpu003Evar g = Math.floor(Math.random() * 256);u003Cu002Fpu003Eu003Cpu003Evar b = Math.floor(Math.random() * 256);u003Cu002Fpu003Eu003Cpu003Ereturn “rgb(“+r+”,”+g+”,”+b+”)”;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003Edraw();u003Cu002Fpu003Eu003Cpu003EsetInterval(draw,30);u003Cu002Fpu003Eu003Cpu003E};u003Cu002Fpu003Eu003Cpu003E<u002Fscript>u003Cu002Fpu003Eu003Cpu003E <u002Fbody>u003Cu002Fpu003Eu003Cpu003E<u002Fhtml>u003Cu002Fpu003Eu003Cpu003E是不是很简单u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:黑客帝国矩阵特效源码

主题测试文章,只做测试使用。发布者:熱鬧獨處,转转请注明出处:http://www.cxybcw.com/26544.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code