window.onload = function() {

//獲取畫布對(duì)象

var canvas = document.getElementById("canvas");

//獲取畫布的上下文

var context = canvas.getContext("2d");

//獲取瀏覽器屏幕的寬度和高度

var W = window.innerWidth;

var H = window.innerHeight;

//設(shè)置canvas的寬度和高度

canvas.width = W;

canvas.height = H;

//每個(gè)文字的字體大小

var fontSize = 16;

//計(jì)算列

var colunms = Math.floor(W / fontSize);

//記錄每列文字的y軸坐標(biāo)

var drops = [];

//給每一個(gè)文字初始化一個(gè)起始點(diǎn)的位置

for (var i = 0; i < colunms; i++) {

drops.push(0);

}

//運(yùn)動(dòng)的文字

var str = "01";

//4:fillText(str,x,y);原理就是去更改y的坐標(biāo)位置

//繪畫的函數(shù)

function draw() {

context.fillStyle = "rgba(0,0,0,0.05)";

context.fillRect(0, 0, W, H);

//給字體設(shè)置樣式

context.font = "700 " + fontSize + "px 微軟雅黑";

//給字體添加顏色

context.fillStyle = "#00cc33"; //可以rgb,hsl, 標(biāo)準(zhǔn)色，十六進(jìn)制顏色

//寫入畫布中

for (var i = 0; i < colunms; i++) {

var index = Math.floor(Math.random() * str.length);

var x = i * fontSize;

var y = drops[i] * fontSize;

context.fillText(str[index], x, y);

//如果要改變時(shí)間，肯定就是改變每次他的起點(diǎn)

if (y >= canvas.height && Math.random() > 0.99) {

drops[i] = 0;

}

drops[i]++;

}

};

function randColor() {

var r = Math.floor(Math.random() * 256);

var g = Math.floor(Math.random() * 256);

var b = Math.floor(Math.random() * 256);

return "rgb(" + r + "," + g + "," + b + ")";

}

draw();

setInterval(draw, 30);

};

總結(jié)

以上是生活随笔為你收集整理的html代码雨特效代码,简易代码雨特效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。