<html>

<head>

<title>星空</title>

<META http-equiv="X-UA-Compatible" content="IE=edge"></META>

<META http-equiv="Content-Type" content="text/html; charset=gb2312"/>

<script>

var BW = 800; //canvas width

var BH = 600; //canvas height

var MAX_STAR_SIZE = 3;

var MAX_STAR_SPEED = 1;

var STAR_COUNT = 120;

var BGCOLOR = "black";

var ctx;

var stars = [];



function rndf(n){

return Math.floor(Math.random()*n);

}



function rndc(n){

return Math.ceil(Math.random()*n);

}



function Star(){

this.reset = function(){

this.x = 0;

this.y = rndf(BH);

this.size = rndc(MAX_STAR_SIZE);

this.vx = MAX_STAR_SPEED*this.size/MAX_STAR_SIZE;

this.vy = 0;

this.color = "rgba("+rndf(255)+", "+rndf(255)+", "+rndf(255)+", 0.5)";

};



this.reset();

this.x = rndf(BW);

}

function render(){

ctx.globalCompositeOperation = "source-over";

ctx.fillStyle = "rgba(0, 0, 0, 0.3)";

ctx.fillRect(0, 0, BW, BH);

ctx.globalCompositeOperation = "lighter";

for(var i = 0; i < STAR_COUNT; ++i){

var p = stars[i];

ctx.beginPath();

var gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.size);

gradient.addColorStop(0, "white");

gradient.addColorStop(0.4, "white");

gradient.addColorStop(0.4, p.color);

gradient.addColorStop(1, "black");

ctx.fillStyle = gradient;

ctx.arc(p.x, p.y, p.size, Math.PI*2, false);

ctx.fill();

p.x += p.vx;

p.y += p.vy;



if(p.x<=0 || p.x>=BW || p.y<=0 || p.y>=BH){

p.reset();

}

}

}

function init(){

if (!window.console){

console = {log:function(){},debug:function(){}};

}

//create canvas

var cv = document.createElement('canvas');

cv.width = BW;

cv.height = BH;

cv.style.background = BGCOLOR;

document.body.appendChild(cv);

ctx = cv.getContext("2d");

//create all stars

for(var i=0;i<STAR_COUNT;++i){

var s = new Star();

stars.push(s);

}

setInterval(render, 33);

};

</script>

</head>

<body onload="init()">

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

</body>

</html>

HTML5梦幻星空，可用作网页背景的更多相关文章

  1. 15款免费的 HTML5/CSS3 响应式网页模板

    如果你想快速制作出一个优秀的网站,网站模板一定是必不可少的.网页设计师和开发人员也可以从网站模板入手,学习先进的布局方式和编码风格.下面这个列表为大家挑选了15款免费的 HTML5/CSS3 响应式网 ...

  2. html5 canvas首屏自适应背景动画循环效果代码

    模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...

  3. 借助Html制作渐变的网页背景颜色

    借助Html制作渐变的网页背景颜色 <html> <head> <title>制作渐变背景</title> <meta http-equiv=&q ...

  4. 【HTML5+MVC4】xhEditor网页编辑器图片上传

    准备工作: 创建一个MVC项目中,添加好xhEditor插件 相关用法:http://www.cnblogs.com/xcsn/p/4701497.html 注意事项:xhEditor分为v1.1.1 ...

  5. 【CSS】css网页背景图片设置

    刚学CSS,了解了下网页背景图设置,顺便记录下. 下面主要是实现背景图位置保持不变,即不随滚动条动而动的功能. body { background-image:url(images/bck.png); ...

  6. 基于html5实现的愤怒的小鸟网页游戏

    之前给大家分享一款基于html5 canvas和js实现的水果忍者网页版,今天给大家分享一款基于html5实现的愤怒的小鸟网页游戏.这款游戏适用浏览器:360.FireFox.Chrome.Safar ...

  7. 用CSS让网页背景图片居中的方法

    网页背景居中的方法有很多种的.这里介绍一些用CSS让背景图片居中的方法. 让背景图片居中的第一个方法是用像素设定,很多都用这种,但是也是最麻烦的: <div style="width: ...

  8. JavaScript实现网页背景自动变色

    JavaScript实现网页背景自动变色,自己变换颜色,设定时间和颜色值即可,在你设定的颜色值.一定时间内自动切换网页背景颜色. <!DOCTYPE HTML PUBLIC "-//W ...

  9. CROW-5 WEB APP引擎商业计划书（HTML5方向）-微信网页版微信公众平台登录-水仙谷

    CROW-5 WEB APP引擎商业计划书(HTML5方向)-微信网页版微信公众平台登录-水仙谷 CROW-5 WEB APP引擎商业计划书(HTML5方向)

随机推荐

  1. 26. Intellij IDEA 启动项目ClassNotFoundException

    转自:https://blog.csdn.net/zhw0596/article/details/81388147 使用Intellij IDEA  的过程中,新创建的项目启动时报 严重: Error ...

  2. Python带括号的计算器

    带括号的计算器也是第一个自我感觉完成最好的 毕竟真的弄了一个多星期 虽然前期这路真的很难走  我会努力加油  将Python学好学踏实 参考了两位博主的文章 http://www.cnblogs.co ...

  3. React开发实时聊天招聘工具 -第六章 登陆注册(2)

    1.bodyParser和cookieParser:   const bodyParser = require('body-parser') const cookieParser = require( ...

  4. 微信、QQ中app的下载问题

    最近在做一个项目,有一项功能是从微信中的分享页或者产品推广页面中下载app:在微信中直接下载app时微信是“拒绝”的,所以一般的做法是点击下载按钮弹出遮罩层,提示在浏览器中打开,然后进入外部浏览器,再 ...

  5. Yeslab 华为安全HCIE-第五门-防火墙攻击防范技术

    Yeslab 华为安全HCIE-第五门-防火墙攻击防范技术 课程目录 Yeslab华为安全HCIE-第五门-防火墙攻击防范技术(8篇)\1_单包攻击防范.aviYeslab华为安全HCIE-第五门-防 ...

  6. 【APP测试】APP弱网环境测试

    方法一:利用抓包工具 1.利用fiddler通过代理连接上手机之后,进入Fiddler->Rules->Customize Rules,点击弹出的CustomRules.js文件,找到m_ ...

  7. 翻译《虚幻引擎4艺术大师 - 蓝图 III 》 中文版

    本文章由cartzhang编写,转载请注明出处. 所有权利保留.  文章链接:http://blog.csdn.net/cartzhang/article/details/49800063  作者:c ...

  8. ArcGIS 空间查询一例

    ISpatialFilter spatialFilter = new SpatialFilterClass(); spatialFilter.Geometry = Polygon ;//设置用于筛选几 ...

  9. win7安装python开发环境，执行python

    在win7上安装python的开发环境是很easy的事情 Step1:下载python安装文件 url:https://www.python.org/download 去这里找到你想要下载的文件 St ...

  10. js插件---datatables如何使用

    js插件---datatables如何使用 一.总结 一句话总结:a.引入css和js(不要忘记css):b.js代码启动插件(里面可以用参数控制各种功能) 1.dataTables如何显示控制行(比 ...