介绍 & lt; !doctype html>
& lt; html>
& lt; head>
& lt;元charset=癎B2312"/比;
& lt; title>流星雨& lt;/title>
& lt;元名称=発eywords"内容=肮丶?关键字“比;
& lt;元名称=癲escription"内容=懊枋鲂畔ⅰ氨?
& lt; style>
身体{
保证金:0;
溢出:隐藏;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; !
& lt; canvas>画布画板画画的本子
——比;
& lt;帆布风格高度宽度=400=400=氨尘?# 000000;“id=癱anvas"祝辞& lt;/canvas>
& lt; !
javascript
画笔
——比;
& lt; script>//获取画板//doccument当前文档//getElement获取一个标签//ById通过Id名称的方式//var声明一片空间//var帆布声明一片空间的名字叫做画布
画布var=. getelementbyid (“canvas");//获取画板权限上下文
var ctx=canvas.getContext (“2 d");//让画板的大小等于屏幕的大?*
思路:
1 .获取屏幕对象
2 .获取屏幕的尺寸
3 .屏幕的尺寸赋值给画板
*///获取屏幕对象
var s=window.screen;//获取屏幕的宽度和高度
var w=s.width;
var h=s.height;//设置画板的大小
画布。宽度=w;
画布。身高=h;//设置文字大小
var字形大?14;//计算一行有多少个文字取整数向下取整
var秘密地=Math.floor (w/字形大小);//思考每一个字的坐标//创建数组把名下个0 (y坐标存储起来)
var滴=[];
var str=皅wertyuiopasdfghjklzxcvbnm";//往数组里面添加秘密地个0
我(var=0; i<秘密地;我+ +){
drops.push (0);
}//绘制文字
函数拉带(){//给矩形设置填充色
ctx.fillStyle=皉gba (0, 0, 0, 0.05)“;//绘制一个矩形
ctx.fillRect (0, 0 w h);//添加文字样式
ctx。字体=?00“+字形大小+“px微软雅黑“;//设置文字颜色
ctx。fillStyle=? ff2d2d";
我(var=0; i<秘密地;我+ +){//x坐标
var x=我*字形大小;//y坐标
var y=下降[我]*字形大小;//设置绘制文字
ctx.fillText (str [Math.floor (math . random () * str.length)], x, y);
如果(y> h&, math . random()在0.99){
下降[我]=0;
}
下降[我]+ +;
}
}//定义一个定时器,每隔30毫秒执行一次
setInterval(细绳,30);
& lt;/script>
& lt;/body>
& lt;/html>
小编给大家分享一下使用html实现流星雨的效果的方法,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!
看完了这篇文章,相信你对使用html实现流星雨的效果的方法有了一定的了解,想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!
