偶然看到用canvas绘制流星雨,好好看呀！

遇上一个人，只需擦肩而过的缘分；喜欢一个人，只需一见钟情的瞬间；爱上一个人只需流星划过的刹那；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>流星雨</title><style>body {background-color: black;}body, html {width: 100%;height: 100%;overflow: hidden;}</style>
</head>
<body><canvas id="starrySky"></canvas>
</body>
<script>var context;var rainCount = 20;var starCount = 800;var arr = new Array();   var meteorShower = new Array();function init() {var starrySky = document.getElementById("starrySky");windowWidth = window.innerWidth; //当前的窗口的高度starrySky.width = windowWidth;starrySky.height = window.innerHeight;context = starrySky.getContext("2d");}var Star = function () {this.x = windowWidth * Math.random();//横坐标this.y = 5000 * Math.random();//纵坐标this.text = ".";//文本this.color = "white";//颜色this.getColor = function () {var ran = Math.random();if (ran < 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();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();meteorShower.push(rain);}drawMoon();//月亮playstarrySky();//星星playmeteorShower();//流星}function playstarrySky() {for (var n = 0; n < starCount; n++) {arr[n].getColor();arr[n].draw();}setTimeout("playstarrySky()", 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 = 0.8//透明度this.getRandomColor();//最小长度，最大长度var x = Math.random() * 80 + 150;this.length = Math.ceil(x);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 () {this.color1 = "rgba(" + 51 + "," + 102 + "," + 255 + ",1)";//结束颜色this.color2 = "#0c0c0c";}this.countPos = function ()//{this.x = this.x - this.offset_x;this.y = this.y + this.offset_y;}this.getPos = function () //{this.x = Math.random() * window.innerWidth; //窗口高度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);this.countPos();this.alpha -= 0.002;this.draw();}}//流星function playmeteorShower() {for (var n = 0; n < rainCount; n++) {var rain = meteorShower[n];rain.move();//移动if (rain.y > window.innerHeight) {context.clearRect(rain.x, rain.y - rain.height, rain.width, rain.height);meteorShower[n] = new MeteorRain();meteorShower[n].init();}}setTimeout("playmeteorShower()", 2);}
</script>

canvas绘制流星雨相关推荐

用canvas绘制流星夜空
流星是一种唯美的天文现象,我一度想用所学知识将它绘制,最近阅读MDN上的canvas教程得到启发,用一个canvas的长尾效果绘制流星-- 什么是长尾效果? 我们知道,canvas动画实现依赖于画布的 ...
canvas绘制的文字如何换行
<html><head><title>canvas绘制的文字如何换行</title><style type="text/css" ...
HTML5 canvas绘制雪花飘落
Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表.动画等.没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Fl ...
canvas绘制时钟
听了慕课网Sliav Zhou 的课程canvas绘制时钟,记录下来的代码,每句做了注解便于以后学习,原先每次边听别的课边敲码,错误百出,明明原封不动复制的代码,就会出错,还找不到原因,今天可能运气好 ...
canvas绘制圆形
canvas绘制圆形的思路: 1.创建路径 XXX.beginpath(); 2.创建圆形的路径: 3.关闭路径:XXX.closepath(); 路径不关闭也能绘制出图形 4.设定绘制样式. 创建圆 ...
java canvas 画图片_[Java教程][HTML5] Canvas绘制简单图片
[Java教程][HTML5] Canvas绘制简单图片 0 2016-05-13 13:00:04 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象 ...
html5 canvas绘制圆形进度实例
2019独角兽企业重金招聘Python工程师标准>>> html5 canvas绘制圆形进度实例 <canvas id="test" width=200 h ...
【Android 应用开发】Canvas 绘制文字 ( 文字尺寸测量 | 基线绘制 )
文章目录 I . 文字尺寸测量 II . 基线绘制 I . 文字尺寸测量 1 . 精准绘制需求 : Canvas 绘制文字时 , 有时需要精准的控制文字的绘制 , 如绘制到指定的区域 , 居中 , 或 ...
小猿圈html5教程之canvas绘制线段方法
HTML5现在是时下较火的编程语言之一,但是对于怎么学习很多朋友都是不了解的,不知道从何处下手,针对以上内容小猿圈web前端讲师每天会分享一个web前端知识,希望对你的前端学习有一定的帮助,今天分享的 ...

canvas绘制流星雨

遇上一个人，只需擦肩而过的缘分；喜欢一个人，只需一见钟情的瞬间；爱上一个人只需流星划过的刹那；

canvas绘制流星雨相关推荐

最新文章

热门文章