不废话，上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>将随机选取的utf8转成汉字雨</title>
</head>
<body>
<canvas id="c"></canvas>
<script>
var c=document.getElementById("c");
var ctx=c.getContext("2d");
c.width=window.innerWidth;
c.height=window.innerHeight;
//ctx.fillRect(0,0,100,100);
//a,b,c,d分别代表x方向偏移,y方向偏移,宽，高
//4e00~9fa5 or 19968~40869 随机长度
var char_code = '',start = 19968,end = 40869;
var L = Math.random()*(end - start);
for(var j = start;j <= (start+L);j++){
char_code += parseInt(j).toString(16)+" ";
}
//将随机选取的unicode字符串转化为汉字
var string1 = toChinese(char_code);
string1.split("");
var fontsize=16;
columns=c.width/fontsize;
var drop = [];
for(var x=0;x<columns;x++)
{
drop[x]=0;
}
function drap(){
ctx.fillStyle="rgba(0,0,0,0.07)";
ctx.fillRect(0,0,c.width,c.height);
ctx.fillStyle="#0F0";
ctx.font=fontsize+"px arial";
for(var i=0;i<drop.length;i++){
var text1=string1[Math.floor(Math.random()*string1.length)];
ctx.fillText(text1,i*fontsize,drop[i]*fontsize);
drop[i]++;
//0.5%的几率掉落
if(drop[i]*fontsize>c.height&&Math.random()>0.95){
drop[i]=0;
}
}
}
function toChinese(data)
{
if(data == '') return '请输入十六进制unicode';
data = data.split(' ');
var str ='';
for(var i=0;i<data.length;i++)
{
str+=String.fromCharCode(parseInt(data[i],16).toString(10));
}
return str;
}
setInterval(drap,20);
</script>
</body>
</html>
点击看效果 : 随机的汉字雨
0 条评论。