HTML5梦幻星空,可用作网页背景
<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梦幻星空,可用作网页背景的更多相关文章
- 15款免费的 HTML5/CSS3 响应式网页模板
如果你想快速制作出一个优秀的网站,网站模板一定是必不可少的.网页设计师和开发人员也可以从网站模板入手,学习先进的布局方式和编码风格.下面这个列表为大家挑选了15款免费的 HTML5/CSS3 响应式网 ...
- html5 canvas首屏自适应背景动画循环效果代码
模板描述:html5 canvas首屏自适应背景动画循环效果代码 由于动态图太大,怕以后服务器受不了,所以现在都改为静态图了,大家点击演示地址一样的,希望大家喜欢,你们的支持就是小海的动力!! 欢迎大 ...
- 借助Html制作渐变的网页背景颜色
借助Html制作渐变的网页背景颜色 <html> <head> <title>制作渐变背景</title> <meta http-equiv=&q ...
- 【HTML5+MVC4】xhEditor网页编辑器图片上传
准备工作: 创建一个MVC项目中,添加好xhEditor插件 相关用法:http://www.cnblogs.com/xcsn/p/4701497.html 注意事项:xhEditor分为v1.1.1 ...
- 【CSS】css网页背景图片设置
刚学CSS,了解了下网页背景图设置,顺便记录下. 下面主要是实现背景图位置保持不变,即不随滚动条动而动的功能. body { background-image:url(images/bck.png); ...
- 基于html5实现的愤怒的小鸟网页游戏
之前给大家分享一款基于html5 canvas和js实现的水果忍者网页版,今天给大家分享一款基于html5实现的愤怒的小鸟网页游戏.这款游戏适用浏览器:360.FireFox.Chrome.Safar ...
- 用CSS让网页背景图片居中的方法
网页背景居中的方法有很多种的.这里介绍一些用CSS让背景图片居中的方法. 让背景图片居中的第一个方法是用像素设定,很多都用这种,但是也是最麻烦的: <div style="width: ...
- JavaScript实现网页背景自动变色
JavaScript实现网页背景自动变色,自己变换颜色,设定时间和颜色值即可,在你设定的颜色值.一定时间内自动切换网页背景颜色. <!DOCTYPE HTML PUBLIC "-//W ...
- CROW-5 WEB APP引擎商业计划书(HTML5方向)-微信网页版微信公众平台登录-水仙谷
CROW-5 WEB APP引擎商业计划书(HTML5方向)-微信网页版微信公众平台登录-水仙谷 CROW-5 WEB APP引擎商业计划书(HTML5方向)
随机推荐
- logAnalyzer日志管理系统配置实例
LogAnalyzer日志管理系统配置实例 上个月我写过一篇<利用EventlogAnalyzer分析Linux日志>一文深受大家喜欢,今天我再次为大家讲解Linux系统下的一款开源的日志 ...
- Android Retrofit网络请求Service,@Path、@Query、@QueryMap、@Map...
http://blog.csdn.net/jdsjlzx/article/details/51607867
- IPv4私有IP地址有哪些!
私有IP地址是一段保留的IP地址.只是使用在局域网中,在Internet上是不使用的. 私有IP地址的范围有: 私网地址分有三类, A类中,第一段为10的都为私网地址,B类中,以172.16--172 ...
- 使用iVMS-4200 存储录像数据时的设置
1.安装软件时,选择:存储服务器 2.对存储服务器进行配置,具体配置见 配置手册.
- while my time-- , will the meaning++?
// while my time--,will the meaning++? // However,what's the meaning of life ? while(tomorrow>0){ ...
- nodejs操作文件和数据流
前言 node中有一组流api,它们可以像处理网络流一样处理文件.流api用起来非常方便,本节学习介绍文件处理基础和流的概念. 目录 处理文件路径 fs核心模块简介 操作流 慢客户端问题 1. 处理文 ...
- 紫书 例题 9-11 UVa 1331 (最优三角形剖分)
设置f(i, j)为点i, i + 1 --j所组成的多边形. 那么可以枚举中间点k, 得f(i, j) = min{s(i, j, k), f(i, k), f(k, j) | i < k & ...
- 【Henu ACM Round#16 C】Graph and String
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 根据题意:先明确以下规则: 1.如果两个点之间没有边,那么这两个点只能是a或c,且不能相同 2.如果两个点之间有边,那么他们之间的差 ...
- Android 第三方分享中遇到的问题以及解决方案
本文来自http://blog.csdn.net/liuxian13183/ ,引用必须注明出处! 第三方登录和分享过程中难免遇到各种纠结的问题,下面将我遇到的分享给大家. 先说第三方登录 1.首先要 ...
- cogs 1430. [UVa 11300]分金币
1430. [UVa 11300]分金币 ★☆ 输入文件:Wealth.in 输出文件:Wealth.out 简单对比时间限制:1 s 内存限制:256 MB [题目描述] 圆桌旁坐着 ...