站长资源
中国站长网站

canvas文字雨效果的实现

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas文字雨-www.wangdahai.cn</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<canvas id="c"></canvas>

<script>
var c = document.getElementById('c');
var ctx = c.getContext('2d');

c.height = window.innerHeight;
c.width = window.innerWidth;

var txts = "01";
txts = txts.split("");

var font_size = 16;
var columns = c.width / font_size;

var s = [];
for (var x = 0; x < columns; x++)
    s[x] = 1;

function draw() {
    ctx.fillStyle = "rgba(0,0,0, 0.05)";
    ctx.fillRect(0, 0, c.width, c.height);
    ctx.fillStyle = "#0F0";
    ctx.font = font_size + "px arial";

    for (var i = 0; i < s.length; i++) {
        var text = Math.floor(Math.random() * 2);
        ctx.fillText(text, i * font_size, s[i] * font_size);

        if (s[i] * font_size > c.height || Math.random() > 0.95)
            s[i] = 0;

        s[i]++
    }

}
setInterval(draw, 50);
</script>

</body>
</html>


在线演示  
×

站长资源极速下载通道: canvas文字雨效果的实现

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » canvas文字雨效果的实现

评论 抢沙发

评论前必须登录!