html5星空特效代码(html流星雨特效)
html5中说这段代码定义的函数可以绘制多角星，不知道它的具体意思，麻烦哪位大侠指点一下计算原理
程序可以改动一下，看起来会更容易一点。
// 开始创建路径
context.beginPath();
var dig = Math.PI / n * 4;
//改：var dig = 2*(2*Math.PI / n) ;
//括号里就是将360度平均分成n份
//为什么前面还要乘以2，见下面（2.画这类图形的技巧（或者说规律。））
for(var i = 0; i n ; i++)
{
????var x = Math.sin(i * dig);
????var y = Math.cos(i * dig);
????context.lineTo(x * size + dx ,y * size + dy);
//上面三行改成：
????//var x = dx+size*Math.sin(i * dig); ?//（1）
????//var y = dy+size*Math.cos(i * dig); ?//（2）
????//context.lineTo(x,y);
????//（1），（2）其实是圆的参数方程
????//把（1），（2）再改，如下：
????//var x=dx+size*Math.cos(Math.PI/2-i*dig);//sin变cos
????//var y=dy+size*Math.sin(Math.PI/2-i*dig);//cos变sin
}
context.closePath();
首先至少掌握三点知识。
1.这类图形的特点。
2.画这类图形的技巧（或者说规律。）
3.圆的参数方程。
变量：
n:N角星的顶点数。
dx,dy: N角星的位置，也是N角星中心点的坐标
size: N角星的大小，也是N角星任一顶点到N角星中心点的距离。
angle: 相邻顶点到中心点形成的夹角度
dig: 每一段两点顶点与中心点形成的夹角度
1.这类图形的特点。
特点：
（1）所有的顶点都在一个圆上。圆心O为图形的中心点，半径r为中心点到任一顶点的距离,即size。
（2）任意相邻的两个顶点到中心点所形成的角度相等。则angle=2*PI/n：
2.画这类图形的技巧（或者说规律。）
你给的程序画出来的图形，每画一条线段之间跳过了一个顶点。
举个例子，拿七角星来讲，首先先给七角星的顶点按顺时针编号，即1-7。
你给的程序是这么连的：1-3-5-7-2-6-4-6-1 ,
跟据这点，可得出一个规律：
1-3-5-7-2-6-4-6-1，这个数列，每相邻的两点与中心点形成的角度相等。
即1-3，3-5...形成的角度相等，这个角度即是dig=2*angle。
3.圆的参数方程.
方程如下：（x0,y0）为中心点的坐标。即(dx,dy)，a为角度，r为半径即size
x=x0+r*cos(a);
y=y0+r*sin(a);
举个例，画7角星：
从0度的点开始画：按1-3-5-7-2-6-4-6-1画,
那么，
第1点：x=dx+size*cos(0);y=dy+size*sin(0);
第3点：x=dx+size*cos(0+dig*1);y=dy+size*sin(0+dig*1);
第5点: x=dx+size*cos(0+dig*2);y=dy+size*sin(0+dig*2);
...
表达有限，比较凌乱，哈哈。
根据这个原理，我写出下面的函数，画出来的星形比较“骨感”：
//参数的意思与你给出来的一样。
//注，num不能为偶数，否则画出来的不是星形
function drawStar(pan2d,num,x,y,size)
{
????pan2d.beginPath();
????var startAngle=-Math.PI*0.5;// 起点角度
????var dig=Math.PI-Math.PI/num;//var dig=Math.PI-2*Math.PI/num*0.5;
????for(var i=0;inum;i+=1)
????{
????????var angle=startAngle+dig*i;
????????var px=x+size*Math.cos(angle);
????????var py=y+size*Math.sin(angle);
????????pan2d.lineTo(px,py);
????}
????pan2d.closePath();
????pan2d.stroke();
}
求网页的星空背景代码
要完成此效果需要两个步骤
第一步：把如下代码加入到body区域中
script language="JavaScript"
!--
SmallStars = 30;
LargeStars = 10;
SmallYpos = new Array();
SmallXpos = new Array();
LargeYpos = new Array();
LargeXpos = new Array();
Smallspeed= new Array();
Largespeed= new Array();
ns=(document.layers)?1:0;
if (ns){
for (i = 0; i SmallStars; i++)
{document.write("LAYER NAME= sn"+i+" LEFT=0 TOP=0 BGCOLOR= #FFFFF0 CLIP= 0,0,1,1 /LAYER")}
for (i = 0; i LargeStars; i++)
{document.write("LAYER NAME= ln"+i+" LEFT=0 TOP=0 BGCOLOR= #FFFFFF CLIP= 0,0,2,2 /LAYER")}
}
else{
document.write( div style="position:absolute;top:0px;left:0px" );
document.write( div style="position:relative" );
for (i = 0; i SmallStars; i++)
{document.write( div id="si" style="position:absolute;top:0;left:0;width:1px;height:1px;background:#fffff0;font-size:1px"/div )}
document.write( /div );
document.write( /div );
document.write( div style="position:absolute;top:0px;left:0px" );
document.write( div style="position:relative" );
for (i = 0; i LargeStars; i++)
{document.write( div id="li" style="position:absolute;top:0;left:0;width:2px;height:2px;background:#ffffff;font-size:2px"/div )}
document.write( /div );
document.write( /div );
}
WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;
WinWidth=(document.layers)?window.innerWidth:window.document.body.clientWidth;
//Inital placement!
for (i=0; i SmallStars; i++)
{
SmallYpos[i] = Math.round(Math.random()*WinHeight);
SmallXpos[i] = Math.round(Math.random()*WinWidth);
Smallspeed[i]= Math.random()*5+1;
}
for (i=0; i LargeStars; i++)
{
LargeYpos[i] = Math.round(Math.random()*WinHeight);
LargeXpos[i] = Math.round(Math.random()*WinWidth);
Largespeed[i]= Math.random()*10+5;
}
function fly(){
var WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;
var WinWidth=(document.layers)?window.innerWidth:window.document.body.clientWidth;
var hscrll=(document.layers)?window.pageYOffset:document.body.scrollTop;
var wscrll=(document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i=0; i LargeStars; i++)
{
LargeXpos[i]-=Largespeed[i];
if (LargeXpos[i] -10)
{
LargeXpos[i]=WinWidth;
LargeYpos[i]=Math.round(Math.random()*WinHeight);
Largespeed[i]=Math.random()*10+5;
}
if (ns){
document.layers[ ln +i].left=LargeXpos[i];
document.layers[ ln +i].top=LargeYpos[i]+hscrll;
}
else{
li[i].style.pixelLeft=LargeXpos[i];
li[i].style.pixelTop=LargeYpos[i]+hscrll;
}
}
for (i=0; i SmallStars; i++)
{
SmallXpos[i]-=Smallspeed[i];
if (SmallXpos[i] -10)
{
SmallXpos[i]=WinWidth;
SmallYpos[i]=Math.round(Math.random()*WinHeight);
Smallspeed[i]=Math.random()*5+1;
}
if (ns){
document.layers[ sn +i].left=SmallXpos[i];
document.layers[ sn +i].top=SmallYpos[i]+hscrll;
}
else{
si[i].style.pixelLeft=SmallXpos[i];
si[i].style.pixelTop=SmallYpos[i]+hscrll;
}
}
setTimeout( fly() ,10);
}
//fly();
//--
/script
第二步：把“onLoad="fly()"”加在body标记里
例如：body onLoad="fly()"
星空代码和旋转代码区别在于哪里
html5特效代码旋转的星空，首先要设置背景为暗一点的背景色或者图片，例如设置成黑色的背景颜色，然后把代码复制到html文件里，设置下下方JS里的一些设置，如星星的数量、星星移动的范围、星星的大小等，保存后用支持html5的浏览器打开就能看到旋转的星空特效。
温馨提示：如果使用复制按钮代码出现错误，建议使用ctrl+c来复制代码。
!doctype html
html
head
meta charset="utf-8"
title旋转的星空/title
style type="text/css"
body{background: black;padding: 0;margin: 0; overflow:hidden}
.header{margin: 0 auto;width: 100%;height: 100%;background-color: #000;position: relative;}
/style
/head
body
div class="header"canvas id="canvas"/canvas/div
script
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
w = canvas.width = window.innerWidth,
h = canvas.height = window.innerHeight,
hue = 217,
stars = [],
count = 0,
maxStars = 3000;//星星数量
var canvas2 = document.createElement('canvas'),
ctx2 = canvas2.getContext('2d');
canvas2.width = 100;
canvas2.height = 100;
var half = canvas2.width / 2,
gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
gradient2.addColorStop(0.025, '#CCC');
gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
gradient2.addColorStop(1, 'transparent');
ctx2.fillStyle = gradient2;
ctx2.beginPath();
ctx2.arc(half, half, half, 0, Math.PI * 2);
ctx2.fill();
// End cache
function random(min, max) {
if (arguments.length 2) {
max = min;
min = 0;
}
if (min max) {
var hold = max;
max = min;
min = hold;
}
return Mat(Math.random() * (max - min + 1)) + min;
}
function maxOrbit(x, y) {
var max = Math.max(x, y),
diameter = Math.round(Math.sqrt(max * max + max * max));
return diameter / 2;
//星星移动范围，值越大范围越小，
}
var Star = function() {
this.orbitRadius = random(maxOrbit(w, h));
this.radius = random(60, this.orbitRadius) / 8;
//星星大小
this.orbitX = w / 2;
this.orbitY = h / 2;
this.timePassed = random(0, maxStars);
this.speed = random(this.orbitRadius) / 50000;
//星星移动速度
this.alpha = random(2, 10) / 10;
count++;
stars[count] = this;
}
Star.prototype.draw = function() {
var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
twinkle = random(10);
if (twinkle === 1 this.alpha 0) {
this.alpha -= 0.05;
} else if (twinkle === 2 this.alpha 1) {
this.alpha += 0.05;
}
ctx.globalAlpha = this.alpha;
ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
this.timePassed += this.speed;
}
for (var i = 0; i maxStars; i++) {
new Star();
}
function animation() {
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 0.5; //尾巴
ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
ctx.fillRect(0, 0, w, h)
ctx.globalCompositeOperation = 'lighter';
for (var i = 1, l = stars.length; i l; i++) {
stars[i].draw();
};
window.requestAnimationFrame(animation);
}
animation();
/script
/body
/html
用FLASH做星空中星星闪烁效果，找来一段代码，可闪烁的时候背景也跟着动，星星闪的速度想慢点怎么调整？
星星需要先设置实例名称“star”(选中星星影片剪辑，打开属性-实例名称处设置)，然后代码第一句这样改：
star.onEnterFrame=function(){
速度要慢，需要影片剪辑内部，将星星的闪烁动画中间的帧加长一些。
怎么给html5背景加上js粒子特效
使用了particles.js
particles.js可以从github网站下载到最新的源码，网址是
使用方法非常简单
第一步，在html中引入脚本文件 particles.min.js，这个文件在下载的压缩包里可以找到
script?src="particles.min.js"/script
第二步，在html中放入一个div容器，设置id为particles-js。这个一般放在所有网页元素的最后面就可以。
div?id="particles-js"/div
style?type="text/css"
#particles-js?{
position:?absolute;
top:0;
width:100%;
}
/style
第三步，设置窗口样式
style?type="text/css"
#particles-js?{
z-index:?-1;
position:?absolute;
top:?0;
width:?100%;
background:?#aaa;
}/style
第四步，脚本生成粒子效果，可以单独放在一个js文件里，也可以放在script标签里。无论如何，这段脚本要出现在div容器之后。
particlesJS("particles-js",?{??"particles":?{????"number":?{??????"value":?380,??????"density":?{????????"enable":?true,????????"value_area":?800
??????}
????},????"color":?{??????"value":?"#ffffff"
????},????"shape":?{??????"type":?"circle",??????"stroke":?{????????"width":?0,????????"color":?"#000000"
??????},??????"polygon":?{????????"nb_sides":?5
??????},??????"image":?{????????"src":?"img/github.svg",????????"width":?100,????????"height":?100
??????}
????},????"opacity":?{??????"value":?0.5,??????"random":?false,??????"anim":?{????????"enable":?false,????????"speed":?1,????????"opacity_min":?0.1,????????"sync":?false
??????}
????},????"size":?{??????"value":?3,??????"random":?true,??????"anim":?{????????"enable":?false,????????"speed":?40,????????"size_min":?0.1,????????"sync":?false
??????}
????},????"line_linked":?{??????"enable":?true,??????"distance":?150,??????"color":?"#ffffff",??????"opacity":?0.4,??????"width":?1
????},????"move":?{??????"enable":?true,??????"speed":?6,??????"direction":?"none",??????"random":?false,??????"straight":?false,??????"out_mode":?"out",??????"bounce":?false,??????"attract":?{????????"enable":?false,????????"rotateX":?600,????????"rotateY":?1200
??????}
????}
??},??"interactivity":?{????"detect_on":?"canvas",????"events":?{??????"onhover":?{????????"enable":?true,????????"mode":?"grab"
??????},??????"onclick":?{????????"enable":?true,????????"mode":?"push"
??????},??????"resize":?true
????},????"modes":?{??????"grab":?{????????"distance":?140,????????"line_linked":?{??????????"opacity":?1
????????}
??????},??????"bubble":?{????????"distance":?400,????????"size":?40,????????"duration":?2,????????"opacity":?8,????????"speed":?3
??????},??????"repulse":?{????????"distance":?200,????????"duration":?0.4
??????},??????"push":?{????????"particles_nb":?4
??????},??????"remove":?{????????"particles_nb":?2
??????}
????}
??},??"retina_detect":?true});
QQ空间星空代码
不知道你说的是哪个 这是现在所有免费代码了
QQ边框代码：
爱的甜蜜蜜 javascript:window.top.space_addItem(16,21903,0,80,500,500,0);
爱你一生不变 javascript:window.top.space_addItem(16,21904,0,80,500,500,0);
爱情轨迹 javascript:window.top.space_addItem(16,21905,0,80,500,500,0);
爱情之旅 javascript:window.top.space_addItem(16,21906,0,80,650,650,0);
回味爱情 javascript:window.top.space_addItem(16,21907,0,80,500,500,0);
偏偏喜欢你 javascript:window.top.space_addItem(16,21908,0,80,500,500,0);
收获爱情 javascript:window.top.space_addItem(16,21909,0,80,500,500,0);
谢谢你的爱 javascript:window.top.space_addItem(16,21910,0,80,500,500,0);
有你真精彩 javascript:window.top.space_addItem(16,21911,0,80,500,500,0);
真的很想你 javascript:window.top.space_addItem(16,21912,0,80,500,500,0);
QQ空间模块移动代码:
版块靠左代码——javascript:window.top.space_addItem(1,9475,0,0,1,1,93);
版块居中代码——javascript:window.top.space_addItem(1,9475,100,0,1,1,93);
版块右移代码——javascript:window.top.space_addItem(1,9475,235,0,1,1,93);
迷失自我：
版块靠左代码——javascript:window.top.space_addItem(1,9475,0,0,1,1,94);
版块居中代码——javascript:window.top.space_addItem(1,9475,100,0,1,1,94);
版块右移代码——javascript:window.top.space_addItem(1,9475,235,0,1,1,94);
彩虹云朵：
版块靠左代码——javascript:window.top.space_addItem(1,8674,0,80,100,100,94);
版块居中代码——javascript:window.top.space_addItem(1,8674,100,80,100,100,94);
版块右移代码——javascript:window.top.space_addItem(1,8674,235,80,100,100,94);
蓝星闪烁：
版块靠左代码——javascript:window.top.space_addItem(1,8674,0,80,100,100,93);
版块居中代码——javascript:window.top.space_addItem(1,8674,100,80,100,100,93);
版块右移代码——javascript:window.top.space_addItem(1,8674,235,80,100,100,93);
浓情马克：
版块靠左代码——javascript:window.top.space_addItem(1,11273,0,80,0,0,94);
版块居中代码——javascript:window.top.space_addItem(1,11273,100,80,0,0,94);
版块右移代码——javascript:window.top.space_addItem(1,11273,235,80,0,0,94);
蓝色皮肤：
版块靠左代码——javascript:window.top.space_addItem(1,11762,0,0,96,96,94);
版块居中代码——javascript:window.top.space_addItem(1,11762,100,0,96,96,94);
版块右移代码——javascript:window.top.space_addItem(1,11762,235,0,96,96,94);
版块右移代码：
黑色：javascript:window.top.space_addItem(1,12736,230,80,0,0,20);
黑色：javascript:window.top.space_addItem(1,9475,230,80,0,0,20);
紫黑：javascript:window.top.space_addItem(1,8669,230,80,0,0,20);
蓝色：javascript:window.top.space_addItem(1,11762,230,80,0,0,20);
隐藏导航代码
javascript:window.top.space_addItem(13,1333,0,80,0,0,94);
隐藏播放器代码
javascript:window.top.space_addItem(6,676,1899,0,200,200,0);
去除横幅代码:
黄钻专用去横幅代码：javascript:window.top.space_addItem(19,15330,0,0,0,0,10000);
QQ空间皮肤代码
七色彩虹：javascript:window.top.space_addItem(1,8674,0,80,100,100,94);
灰色皮肤代码：javascript:window.top.space_addItem(1,6300,0,0,0,0,1);
黑色皮肤：javascript:window.top.space_addItem(1,9475,20,100,0,0,93);
黑暗世界javascript:window.top.space_addItem(1,9475,0,0,1,1,94);
红极一时javascript:window.top.space_addItem(1,11273,0,80,0,0,93);
黑星耀眼javascript:window.top.space_addItem(1,12736,0,80,0,0,93);
玫瑰花javascript:window.top.space_addItem(1,8669,100,80,100,100,123);
静悄悄 javascript:window.top.space_addItem(1,8669,100,80,100,100,94); （带花、居中）
快乐十分javascript:window.top.space_addItem(1,8674,0,80,100,100,94); （彩虹）
迷失世界javascript:window.top.space_addItem(1,9475,0,0,1,1,94);（这个是黑的）
蓝色 javascript:window.top.space_addItem(1,11762,0,0,96,96,94); （蓝的）
睡美人（很漂亮）javascript:window.top.space_addItem(13,9758,0,0,200,600,0);
白色可爱风格：javascript:window.top.space_addItem(1,4703,0,80,0,0,94)；
爱情系列：
javascript:window.top.space_addItem(1,7513,0,80,0,0,94);
全红免费皮肤：javascript:window.top.space_addItem(1,11273,0,80,0,0,93);
全橙样式：javascript:window.top.space_addItem(1,15306,0,80,0,0,93);
全蓝样式：javascript:window.top.space_addItem(1,15116,0,80,0,0,93);
全紫样式：javascript:window.top.space_addItem(1,15116,0,80,0,0,93);
淡淡粉色：javascript:window.top.space_addItem(1,7513,0,80,0,0,93);
全绿样式：javascript:window.top.space_addItem(1,7619,0,80,0,0,93);
全粉样式：javascript:window.top.space_addItem(1,4693,0,80,0,0,93);
米白色：javascript:window.top.space_addItem(1,4703,0,80,0,0,94);
紫色带星光： javascript:window.top.space_addItem(1,7510,0,80,0,0,93);
橘黄色：javascript:window.top.space_addItem(1,7513,0,80,0,0,93);
水果绿：javascript:window.top.space_addItem(1,7619,0,80,0,0,93);
浅粉红：javascript:window.top.space_addItem(1,4693,0,0,0,0,93);
天际蓝：javascript:window.top.space_addItem(1,15166,0,80,0,0,93);