html5星星效果图,H5 canvas流星雨星星特效
/p>
一起来看流星雨
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);
}
/*流星雨结束*/
background-color: black;
}
body,
html {
width: 100%;
height: 100%;
overflow: hidden;
}
html5星星效果图,H5 canvas流星雨星星特效相关推荐
- ae制h5文字动画_7款超华丽的HTML5 Canvas文字动画特效
本文作者html5tricks,转载请注明出处 文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色.大小等基本属性.有时候我们在一些活动页面上需要展示特别样式的文字效果,这时候我们就 ...
- html霓虹灯效果图,利用HTML5实现Canvas霓虹灯蜂巢特效
特效描述:利用HTML5实现 Canvas 霓虹灯 蜂巢特效.利用HTML5实现Canvas霓虹灯蜂巢特效 代码结构 1. HTML代码 /* because me lazy */ Object.ge ...
- 生日快乐模板php,HTML5应用-生日快乐动画之实现星星的示例代码分享
在讲述绘制星星动画之前,先介绍一点javascript知识. 面向对象: javascript本质上不是面向对象语言,而是脚本语言,一般只适合简单.代码量少的程序,因为脚本过于复杂会直接导致浏览器出现 ...
- 《游戏开发》html5 益智小游戏-小熊吃星星
游戏截图 项目结构 一共3个文件 分别为 index.html script.js style.css index.html文件源码展示 <!DOCTYPE html> <htm ...
- H5 Canvas下雨特效
模仿下雨的特效,雨点从空中随机飘落. 这个特效使用了H5的新特性Canvas. 效果演示 代码展示 body代码 <!DOCTYPE html> <html lang="e ...
- HTML5 canvas生成图片马赛克特效插件
HTML5 canvas生成图片马赛克特效插件 简要教程 这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个 ...
- Canvas流星雨特效
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- html5字体动画效果,7款超华丽的HTML5 Canvas文字动画特效
原标题:7款超华丽的HTML5 Canvas文字动画特效 文字是网页中最为常见的元素之一,当然我们使用最多的就是调整文字的颜色.大小等基本属性.有时候我们在一些活动页面上需要展示特别样式的文字效果,这 ...
- html酷炫电子时钟效果,逼真的HTML5 canvas模拟时钟特效
插件描述:thooClock是一款效果非常逼真的HTML5 canvas模拟时钟特效.该时钟特效使用jQuery和HTML5 Canvas API来制作,模拟现实生活中的时钟.并且它还具有定时闹钟的功 ...
最新文章
- python官网 中文版 新闻-用python看新闻
- exchange离线整理数据库
- C-指针,二级指针,二维数组作为函数参数使用,C语言链表(详解)
- android带方框倒计时,简单漂亮的彩色方块计时器和倒计时js代码
- Redis学习总结(18)——Redis 常见的使用场景汇总
- Opencv实现多幅图片拼接在一起
- vue中ref的使用(this.$refs获取为undefined)
- 在计算机里分数线怎么表示什么意思,高考投档分数线是什么意思 怎么定的
- 由A* = A^T推导问题
- C++虚函数(多态性)
- AD9在元件库封装库添加LOGO
- 2021全国大学生数学建模竞赛B题摘要及总结
- Chrome 谷歌浏览器将整个网页保存为图片
- matlab消除多重共线性,多重共线性问题的几种解决方法-解决多重共线性的方法...
- 什么是光纤?光纤有哪些优势?
- 2007年12月25日至2008年1月1日百宝箱游戏下载排行榜
- 小度wifi在window server2008R2系统下创建不了
- 对封装、继承、多态的简单理解
- 机械师星辰15电脑开机一直黑屏怎么重装电脑系统?
- opencv-python将彩色图片变回灰色图片
热门文章
- LeetCode练习题:斐波那契数列
- 自同步扰乱编码器的原理与MATLAB仿真
- 平面设计常用计算机工具,终于明白平面设计常用硬件设备
- 股市的十大黄金法则——《财务自由之路》的读后感作文5000字
- Mac系统官方资料使用与记录
- 操作系统之文件管理系统
- 分析器错误信息 未能加载类型 命名空间 类 ---小结
- 巴山铁路工人吴磊自学在云上开发文件签报系统,把紧急通知及时送到铁路工人手中,确保行车安全...
- [DAX] 日期时间函数
- [FormulaExcelPython] 一次指数平滑、二次指数平滑、三次指数平滑(Holt-Winters)...