这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了 canvas 实现流星雨的背景效果的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧
看到一个很棒的流星雨效果。修改一下样式就可以作为网页背景了。。!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>一起来看流星雨</title>
- <script>
- var context;
- var arr = new Array();
- var starCount = 800;
- var rains = new Array();
- var rainCount =20;
- //初始化画布及context
- function init(){
- //获取canvas
- var stars = document.getElementById("stars");
- windowWidth = window.innerWidth; //当前的窗口的高度
- stars.width=windowWidth;
- stars.height=window.innerHeight;
- //获取context
- context = stars.getContext("2d");
- }
- //创建一个星星对象
- var Star = function (){
- this.x = windowWidth * Math.random();//横坐标
- this.y = 5000 * Math.random();//纵坐标
- this.text=".";//文本
- this.color = "white";//颜色
- //产生随机颜色
- this.getColor=function(){
- var _r = Math.random();
- if(_r<0.5){
- this.color = "#333";
- }else{
- this.color = "white";
- }
- }
- //初始化
- this.init=function(){
- this.getColor();
- }
- //绘制
- this.draw=function(){
- context.fillStyle=this.color;
- context.fillText(this.text,this.x,this.y);
- }
- }
- //画月亮
- function drawMoon(){
- var moon = new Image();
- moon.src = "./images/moon.jpg"
- context.drawImage(moon,-5,-10);
- }
- //页面加载的时候
- window.onload = function() {
- init();
- //画星星
- for (var i=0;i<starCount;i++) {
- var star = new Star();
- star.init();
- star.draw();
- arr.push(star);
- }
- //画流星
- for (var i=0;i<rainCount;i++) {
- var rain = new MeteorRain();
- rain.init();
- rain.draw();
- rains.push(rain);
- }
- drawMoon();//绘制月亮
- playStars();//绘制闪动的星星
- playRains();//绘制流星
- }
- //星星闪起来
- function playStars(){
- for (var n = 0; n < starCount; n++){
- arr[n].getColor();
- arr[n].draw();
- }
- setTimeout("playStars()",100);
- }
- /*流星雨开始*/
- var MeteorRain = function(){
- this.x = -1;
- this.y = -1;
- this.length = -1;//长度
- this.angle = 30; //倾斜角度
- this.width = -1;//宽度
- this.height = -1;//高度
- this.speed = 1;//速度
- this.offset_x = -1;//横轴移动偏移量
- this.offset_y = -1;//纵轴移动偏移量
- this.alpha = 1; //透明度
- this.color1 = "";//流星的色彩
- this.color2 = ""; //流星的色彩
- /****************初始化函数********************/
- this.init = function () //初始化
- {
- this.getPos();
- this.alpha = 1;//透明度
- this.getRandomColor();
- //最小长度,最大长度
- var x = Math.random() * 80 + 150;
- this.length = Math.ceil(x);
- // x = Math.random()*10+30;
- this.angle = 30; //流星倾斜角
- x = Math.random()+0.5;
- this.speed = Math.ceil(x); //流星的速度
- var cos = Math.cos(this.angle*3.14/180);
- var sin = Math.sin(this.angle*3.14/180) ;
- this.width = this.length*cos ; //流星所占宽度
- this.height = this.length*sin ;//流星所占高度
- this.offset_x = this.speed*cos ;
- this.offset_y = this.speed*sin;
- }
- /**************获取随机颜色函数*****************/
- this.getRandomColor = function (){
- var a = Math.ceil(255-240* Math.random());
- //中段颜色
- this.color1 = "rgba("+a+","+a+","+a+",1)";
- //结束颜色
- this.color2 = "black";
- }
- /***************重新计算流星坐标的函数******************/
- this.countPos = function ()//
- {
- //往左下移动,x减少,y增加
- this.x = this.x - this.offset_x;
- this.y = this.y + this.offset_y;
- }
- /*****************获取随机坐标的函数*****************/
- this.getPos = function () //
- {
- //横坐标200--1200
- this.x = Math.random() * window.innerWidth; //窗口高度
- //纵坐标小于600
- this.y = Math.random() * window.innerHeight; //窗口宽度
- }
- /****绘制流星***************************/
- this.draw = function () //绘制一个流星的函数
- {
- context.save();
- context.beginPath();
- context.lineWidth = 1; //宽度
- context.globalAlpha = this.alpha; //设置透明度
- //创建横向渐变颜色,起点坐标至终点坐标
- var line = context.createLinearGradient(this.x, this.y,
- this.x + this.width,
- this.y - this.height);
- //分段设置颜色
- line.addColorStop(0, "white");
- line.addColorStop(0.3, this.color1);
- line.addColorStop(0.6, this.color2);
- context.strokeStyle = line;
- //起点
- context.moveTo(this.x, this.y);
- //终点
- context.lineTo(this.x + this.width, this.y - this.height);
- context.closePath();
- context.stroke();
- context.restore();
- }
- this.move = function(){
- //清空流星像素
- var x = this.x+this.width-this.offset_x;
- var y = this.y-this.height;
- context.clearRect(x-3,y-3,this.offset_x+5,this.offset_y+5);
- // context.strokeStyle="red";
- // context.strokeRect(x,y-1,this.offset_x+1,this.offset_y+1);
- //重新计算位置,往左下移动
- this.countPos();
- //透明度增加
- this.alpha -= 0.002;
- //重绘
- this.draw();
- }
- }
- //绘制流星
- function playRains(){
- for (var n = 0; n < rainCount; n++){
- var rain = rains[n];
- rain.move();//移动
- if(rain.y>window.innerHeight){//超出界限后重来
- context.clearRect(rain.x,rain.y-rain.height,rain.width,rain.height);
- rains[n] = new MeteorRain();
- rains[n].init();
- }
- }
- setTimeout("playRains()",2);
- }
- /*流星雨结束*/
- </script>
- <style type="text/CSS">
- body{
- background-color: black;
- }
- body,html{width:100%;height:100%;overflow:hidden;}
- </style>
- </head>
- <body>
- <canvas id="stars"></canvas>
- </body>
- </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0529/328525.html