canvas绘制流星效果
偶然看到一篇用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(); }