Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
这人是个神秘人
1024云IDE应用挑战赛
提交
983ec7d7
1024云IDE应用挑战赛
项目概览
这人是个神秘人
/
1024云IDE应用挑战赛
与 Fork 源项目一致
Fork自
Cloud IDE / 1024云IDE应用挑战赛
通知
2
Star
2
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
1024云IDE应用挑战赛
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
983ec7d7
编写于
11月 07, 2022
作者:
游
游浩
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
🚀
完善项目背景
上级
a7ff8c5e
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
302 addition
and
259 deletion
+302
-259
index.html
index.html
+302
-259
未找到文件。
index.html
浏览文件 @
983ec7d7
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>
爱的魔力转圈圈
</title>
<meta
name=
"Generator"
content=
"EditPlus"
/>
<meta
name=
"Author"
content=
"YouHao"
/>
<meta
name=
"Keywords"
content=
"爱心_前端特效"
/>
<meta
name=
"Description"
content=
"前端项目开源爱心特效"
/>
<style>
html
,
body
{
height
:
100%
;
padding
:
0
;
margin
:
0
;
background
:
#abcdef
;
}
canvas
{
position
:
absolute
;
width
:
100%
;
height
:
100%
;
}
</style>
</head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>
爱的魔力转圈圈
</TITLE>
<META
NAME=
"Generator"
CONTENT=
"EditPlus"
>
<META
NAME=
"Author"
CONTENT=
""
>
<META
NAME=
"Keywords"
CONTENT=
""
>
<META
NAME=
"Description"
CONTENT=
""
>
<style>
html
,
body
{
height
:
100%
;
padding
:
0
;
margin
:
0
;
background
:
#fff
;
}
canvas
{
position
:
absolute
;
width
:
100%
;
height
:
100%
;
}
</style>
</HEAD>
<body>
<canvas
id=
"pinkboard"
></canvas>
<script>
/*
* Settings
*/
var
settings
=
{
particles
:
{
length
:
500
,
// maximum amount of particles
duration
:
2
,
// particle duration in sec
velocity
:
100
,
// particle velocity in pixels/sec
effect
:
-
0.75
,
// play with this for a nice effect
size
:
30
,
// particle size in pixels
},
};
<BODY>
<canvas
id=
"pinkboard"
></canvas>
<script>
/*
* Settings
*/
var
settings
=
{
particles
:
{
length
:
500
,
// maximum amount of particles
duration
:
2
,
// particle duration in sec
velocity
:
100
,
// particle velocity in pixels/sec
effect
:
-
0.75
,
// play with this for a nice effect
size
:
30
,
// particle size in pixels
},
};
/*
* RequestAnimationFrame polyfill by Erik Möller
*/
(
function
()
{
var
b
=
0
;
var
c
=
[
"
ms
"
,
"
moz
"
,
"
webkit
"
,
"
o
"
];
for
(
var
a
=
0
;
a
<
c
.
length
&&
!
window
.
requestAnimationFrame
;
++
a
)
{
window
.
requestAnimationFrame
=
window
[
c
[
a
]
+
"
RequestAnimationFrame
"
];
window
.
cancelAnimationFrame
=
window
[
c
[
a
]
+
"
CancelAnimationFrame
"
]
||
window
[
c
[
a
]
+
"
CancelRequestAnimationFrame
"
];
}
if
(
!
window
.
requestAnimationFrame
)
{
window
.
requestAnimationFrame
=
function
(
h
,
e
)
{
var
d
=
new
Date
().
getTime
();
var
f
=
Math
.
max
(
0
,
16
-
(
d
-
b
));
var
g
=
window
.
setTimeout
(
function
()
{
h
(
d
+
f
);
},
f
);
b
=
d
+
f
;
return
g
;
};
}
if
(
!
window
.
cancelAnimationFrame
)
{
window
.
cancelAnimationFrame
=
function
(
d
)
{
clearTimeout
(
d
);
};
}
})();
/*
* RequestAnimationFrame polyfill by Erik Möller
*/
(
function
(){
var
b
=
0
;
var
c
=
[
"
ms
"
,
"
moz
"
,
"
webkit
"
,
"
o
"
];
for
(
var
a
=
0
;
a
<
c
.
length
&&!
window
.
requestAnimationFrame
;
++
a
){
window
.
requestAnimationFrame
=
window
[
c
[
a
]
+
"
RequestAnimationFrame
"
];
window
.
cancelAnimationFrame
=
window
[
c
[
a
]
+
"
CancelAnimationFrame
"
]
||
window
[
c
[
a
]
+
"
CancelRequestAnimationFrame
"
]}
if
(
!
window
.
requestAnimationFrame
){
window
.
requestAnimationFrame
=
function
(
h
,
e
){
var
d
=
new
Date
().
getTime
();
var
f
=
Math
.
max
(
0
,
16
-
(
d
-
b
));
var
g
=
window
.
setTimeout
(
function
(){
h
(
d
+
f
)},
f
);
b
=
d
+
f
;
return
g
}}
if
(
!
window
.
cancelAnimationFrame
){
window
.
cancelAnimationFrame
=
function
(
d
){
clearTimeout
(
d
)}}}());
/*
* Point class
*/
var
Point
=
(
function
()
{
function
Point
(
x
,
y
)
{
this
.
x
=
typeof
x
!==
"
undefined
"
?
x
:
0
;
this
.
y
=
typeof
y
!==
"
undefined
"
?
y
:
0
;
}
Point
.
prototype
.
clone
=
function
()
{
return
new
Point
(
this
.
x
,
this
.
y
);
};
Point
.
prototype
.
length
=
function
(
length
)
{
if
(
typeof
length
==
"
undefined
"
)
return
Math
.
sqrt
(
this
.
x
*
this
.
x
+
this
.
y
*
this
.
y
);
this
.
normalize
();
this
.
x
*=
length
;
this
.
y
*=
length
;
return
this
;
};
Point
.
prototype
.
normalize
=
function
()
{
var
length
=
this
.
length
();
this
.
x
/=
length
;
this
.
y
/=
length
;
return
this
;
};
return
Point
;
})();
/*
* Point class
*/
var
Point
=
(
function
()
{
function
Point
(
x
,
y
)
{
this
.
x
=
(
typeof
x
!==
'
undefined
'
)
?
x
:
0
;
this
.
y
=
(
typeof
y
!==
'
undefined
'
)
?
y
:
0
;
}
Point
.
prototype
.
clone
=
function
()
{
return
new
Point
(
this
.
x
,
this
.
y
);
};
Point
.
prototype
.
length
=
function
(
length
)
{
if
(
typeof
length
==
'
undefined
'
)
return
Math
.
sqrt
(
this
.
x
*
this
.
x
+
this
.
y
*
this
.
y
);
this
.
normalize
();
this
.
x
*=
length
;
this
.
y
*=
length
;
return
this
;
};
Point
.
prototype
.
normalize
=
function
()
{
var
length
=
this
.
length
();
this
.
x
/=
length
;
this
.
y
/=
length
;
return
this
;
};
return
Point
;
})();
/*
* Particle class
*/
var
Particle
=
(
function
()
{
function
Particle
()
{
this
.
position
=
new
Point
();
this
.
velocity
=
new
Point
();
this
.
acceleration
=
new
Point
();
this
.
age
=
0
;
}
Particle
.
prototype
.
initialize
=
function
(
x
,
y
,
dx
,
dy
)
{
this
.
position
.
x
=
x
;
this
.
position
.
y
=
y
;
this
.
velocity
.
x
=
dx
;
this
.
velocity
.
y
=
dy
;
this
.
acceleration
.
x
=
dx
*
settings
.
particles
.
effect
;
this
.
acceleration
.
y
=
dy
*
settings
.
particles
.
effect
;
this
.
age
=
0
;
};
Particle
.
prototype
.
update
=
function
(
deltaTime
)
{
this
.
position
.
x
+=
this
.
velocity
.
x
*
deltaTime
;
this
.
position
.
y
+=
this
.
velocity
.
y
*
deltaTime
;
this
.
velocity
.
x
+=
this
.
acceleration
.
x
*
deltaTime
;
this
.
velocity
.
y
+=
this
.
acceleration
.
y
*
deltaTime
;
this
.
age
+=
deltaTime
;
};
Particle
.
prototype
.
draw
=
function
(
context
,
image
)
{
function
ease
(
t
)
{
return
--
t
*
t
*
t
+
1
;
}
var
size
=
image
.
width
*
ease
(
this
.
age
/
settings
.
particles
.
duration
);
context
.
globalAlpha
=
1
-
this
.
age
/
settings
.
particles
.
duration
;
context
.
drawImage
(
image
,
this
.
position
.
x
-
size
/
2
,
this
.
position
.
y
-
size
/
2
,
size
,
size
);
};
return
Particle
;
})();
/*
* Particle class
*/
var
Particle
=
(
function
()
{
function
Particle
()
{
this
.
position
=
new
Point
();
this
.
velocity
=
new
Point
();
this
.
acceleration
=
new
Point
();
this
.
age
=
0
;
}
Particle
.
prototype
.
initialize
=
function
(
x
,
y
,
dx
,
dy
)
{
this
.
position
.
x
=
x
;
this
.
position
.
y
=
y
;
this
.
velocity
.
x
=
dx
;
this
.
velocity
.
y
=
dy
;
this
.
acceleration
.
x
=
dx
*
settings
.
particles
.
effect
;
this
.
acceleration
.
y
=
dy
*
settings
.
particles
.
effect
;
this
.
age
=
0
;
};
Particle
.
prototype
.
update
=
function
(
deltaTime
)
{
this
.
position
.
x
+=
this
.
velocity
.
x
*
deltaTime
;
this
.
position
.
y
+=
this
.
velocity
.
y
*
deltaTime
;
this
.
velocity
.
x
+=
this
.
acceleration
.
x
*
deltaTime
;
this
.
velocity
.
y
+=
this
.
acceleration
.
y
*
deltaTime
;
this
.
age
+=
deltaTime
;
};
Particle
.
prototype
.
draw
=
function
(
context
,
image
)
{
function
ease
(
t
)
{
return
(
--
t
)
*
t
*
t
+
1
;
}
var
size
=
image
.
width
*
ease
(
this
.
age
/
settings
.
particles
.
duration
);
context
.
globalAlpha
=
1
-
this
.
age
/
settings
.
particles
.
duration
;
context
.
drawImage
(
image
,
this
.
position
.
x
-
size
/
2
,
this
.
position
.
y
-
size
/
2
,
size
,
size
);
};
return
Particle
;
})();
/*
* ParticlePool class
*/
var
ParticlePool
=
(
function
()
{
var
particles
,
firstActive
=
0
,
firstFree
=
0
,
duration
=
settings
.
particles
.
duration
;
/*
* ParticlePool class
*/
var
ParticlePool
=
(
function
()
{
var
particles
,
firstActive
=
0
,
firstFree
=
0
,
duration
=
settings
.
particles
.
duration
;
function
ParticlePool
(
length
)
{
// create and populate particle pool
particles
=
new
Array
(
length
);
for
(
var
i
=
0
;
i
<
particles
.
length
;
i
++
)
particles
[
i
]
=
new
Particle
();
}
ParticlePool
.
prototype
.
add
=
function
(
x
,
y
,
dx
,
dy
)
{
particles
[
firstFree
].
initialize
(
x
,
y
,
dx
,
dy
);
// handle circular queue
firstFree
++
;
if
(
firstFree
==
particles
.
length
)
firstFree
=
0
;
if
(
firstActive
==
firstFree
)
firstActive
++
;
if
(
firstActive
==
particles
.
length
)
firstActive
=
0
;
};
ParticlePool
.
prototype
.
update
=
function
(
deltaTime
)
{
var
i
;
// update active particles
if
(
firstActive
<
firstFree
)
{
for
(
i
=
firstActive
;
i
<
firstFree
;
i
++
)
particles
[
i
].
update
(
deltaTime
);
}
if
(
firstFree
<
firstActive
)
{
for
(
i
=
firstActive
;
i
<
particles
.
length
;
i
++
)
particles
[
i
].
update
(
deltaTime
);
for
(
i
=
0
;
i
<
firstFree
;
i
++
)
particles
[
i
].
update
(
deltaTime
);
}
// remove inactive particles
while
(
particles
[
firstActive
].
age
>=
duration
&&
firstActive
!=
firstFree
)
{
firstActive
++
;
if
(
firstActive
==
particles
.
length
)
firstActive
=
0
;
}
};
ParticlePool
.
prototype
.
draw
=
function
(
context
,
image
)
{
// draw active particles
if
(
firstActive
<
firstFree
)
{
for
(
i
=
firstActive
;
i
<
firstFree
;
i
++
)
particles
[
i
].
draw
(
context
,
image
);
}
if
(
firstFree
<
firstActive
)
{
for
(
i
=
firstActive
;
i
<
particles
.
length
;
i
++
)
particles
[
i
].
draw
(
context
,
image
);
for
(
i
=
0
;
i
<
firstFree
;
i
++
)
particles
[
i
].
draw
(
context
,
image
);
}
};
return
ParticlePool
;
})();
function
ParticlePool
(
length
)
{
// create and populate particle pool
particles
=
new
Array
(
length
);
for
(
var
i
=
0
;
i
<
particles
.
length
;
i
++
)
particles
[
i
]
=
new
Particle
();
}
ParticlePool
.
prototype
.
add
=
function
(
x
,
y
,
dx
,
dy
)
{
particles
[
firstFree
].
initialize
(
x
,
y
,
dx
,
dy
);
/*
* Putting it all together
*/
(
function
(
canvas
)
{
var
context
=
canvas
.
getContext
(
'
2d
'
),
particles
=
new
ParticlePool
(
settings
.
particles
.
length
),
particleRate
=
settings
.
particles
.
length
/
settings
.
particles
.
duration
,
// particles/sec
time
;
// get point on heart with -PI
<=
t
<=
PI
function
pointOnHeart
(
t
)
{
return
new
Point
(
160
*
Math
.
pow
(
Math
.
sin
(
t
),
3
),
130
*
Math
.
cos
(
t
)
-
50
*
Math
.
cos
(
2
*
t
)
-
20
*
Math
.
cos
(
3
*
t
)
-
10
*
Math
.
cos
(
4
*
t
)
+
25
);
}
// creating the particle image using a dummy canvas
var
image
=
(
function
()
{
var
canvas
=
document
.
createElement
(
'
canvas
'
),
context
=
canvas
.
getContext
(
'
2d
'
);
canvas
.
width
=
settings
.
particles
.
size
;
canvas
.
height
=
settings
.
particles
.
size
;
// helper function to create the path
function
to
(
t
)
{
var
point
=
pointOnHeart
(
t
);
point
.
x
=
settings
.
particles
.
size
/
2
+
point
.
x
*
settings
.
particles
.
size
/
350
;
point
.
y
=
settings
.
particles
.
size
/
2
-
point
.
y
*
settings
.
particles
.
size
/
350
;
return
point
;
}
// create the path
context
.
beginPath
();
var
t
=
-
Math
.
PI
;
var
point
=
to
(
t
);
context
.
moveTo
(
point
.
x
,
point
.
y
);
while
(
t
<
Math
.
PI
)
{
t
+=
0.01
;
// baby steps!
point
=
to
(
t
);
context
.
lineTo
(
point
.
x
,
point
.
y
);
}
context
.
closePath
();
// create the fill
context
.
fillStyle
=
'
red
'
;
// handle circular queue
firstFree
++
;
if
(
firstFree
==
particles
.
length
)
firstFree
=
0
;
if
(
firstActive
==
firstFree
)
firstActive
++
;
if
(
firstActive
==
particles
.
length
)
firstActive
=
0
;
};
ParticlePool
.
prototype
.
update
=
function
(
deltaTime
)
{
var
i
;
context
.
fill
();
// create the image
var
image
=
new
Image
();
image
.
src
=
canvas
.
toDataURL
();
return
image
;
})();
// render that thing!
function
render
()
{
// next animation frame
requestAnimationFrame
(
render
);
// update time
var
newTime
=
new
Date
().
getTime
()
/
1000
,
deltaTime
=
newTime
-
(
time
||
newTime
);
time
=
newTime
;
// clear canvas
context
.
clearRect
(
0
,
0
,
canvas
.
width
,
canvas
.
height
);
// create new particles
var
amount
=
particleRate
*
deltaTime
;
for
(
var
i
=
0
;
i
<
amount
;
i
++
)
{
var
pos
=
pointOnHeart
(
Math
.
PI
-
2
*
Math
.
PI
*
Math
.
random
());
var
dir
=
pos
.
clone
().
length
(
settings
.
particles
.
velocity
);
particles
.
add
(
canvas
.
width
/
2
+
pos
.
x
,
canvas
.
height
/
2
-
pos
.
y
,
dir
.
x
,
-
dir
.
y
);
}
// update and draw particles
particles
.
update
(
deltaTime
);
particles
.
draw
(
context
,
image
);
}
// handle (re-)sizing of the canvas
function
onResize
()
{
canvas
.
width
=
canvas
.
clientWidth
;
canvas
.
height
=
canvas
.
clientHeight
;
}
window
.
onresize
=
onResize
;
// delay rendering bootstrap
setTimeout
(
function
()
{
onResize
();
render
();
},
10
);
})(
document
.
getElementById
(
'
pinkboard
'
));
</script>
</BODY>
</HTML>
\ No newline at end of file
// update active particles
if
(
firstActive
<
firstFree
)
{
for
(
i
=
firstActive
;
i
<
firstFree
;
i
++
)
particles
[
i
].
update
(
deltaTime
);
}
if
(
firstFree
<
firstActive
)
{
for
(
i
=
firstActive
;
i
<
particles
.
length
;
i
++
)
particles
[
i
].
update
(
deltaTime
);
for
(
i
=
0
;
i
<
firstFree
;
i
++
)
particles
[
i
].
update
(
deltaTime
);
}
// remove inactive particles
while
(
particles
[
firstActive
].
age
>=
duration
&&
firstActive
!=
firstFree
)
{
firstActive
++
;
if
(
firstActive
==
particles
.
length
)
firstActive
=
0
;
}
};
ParticlePool
.
prototype
.
draw
=
function
(
context
,
image
)
{
// draw active particles
if
(
firstActive
<
firstFree
)
{
for
(
i
=
firstActive
;
i
<
firstFree
;
i
++
)
particles
[
i
].
draw
(
context
,
image
);
}
if
(
firstFree
<
firstActive
)
{
for
(
i
=
firstActive
;
i
<
particles
.
length
;
i
++
)
particles
[
i
].
draw
(
context
,
image
);
for
(
i
=
0
;
i
<
firstFree
;
i
++
)
particles
[
i
].
draw
(
context
,
image
);
}
};
return
ParticlePool
;
})();
/*
* Putting it all together
*/
(
function
(
canvas
)
{
var
context
=
canvas
.
getContext
(
"
2d
"
),
particles
=
new
ParticlePool
(
settings
.
particles
.
length
),
particleRate
=
settings
.
particles
.
length
/
settings
.
particles
.
duration
,
// particles/sec
time
;
// get point on heart with -PI
<=
t
<=
PI
function
pointOnHeart
(
t
)
{
return
new
Point
(
160
*
Math
.
pow
(
Math
.
sin
(
t
),
3
),
130
*
Math
.
cos
(
t
)
-
50
*
Math
.
cos
(
2
*
t
)
-
20
*
Math
.
cos
(
3
*
t
)
-
10
*
Math
.
cos
(
4
*
t
)
+
25
);
}
// creating the particle image using a dummy canvas
var
image
=
(
function
()
{
var
canvas
=
document
.
createElement
(
"
canvas
"
),
context
=
canvas
.
getContext
(
"
2d
"
);
canvas
.
width
=
settings
.
particles
.
size
;
canvas
.
height
=
settings
.
particles
.
size
;
// helper function to create the path
function
to
(
t
)
{
var
point
=
pointOnHeart
(
t
);
point
.
x
=
settings
.
particles
.
size
/
2
+
(
point
.
x
*
settings
.
particles
.
size
)
/
350
;
point
.
y
=
settings
.
particles
.
size
/
2
-
(
point
.
y
*
settings
.
particles
.
size
)
/
350
;
return
point
;
}
// create the path
context
.
beginPath
();
var
t
=
-
Math
.
PI
;
var
point
=
to
(
t
);
context
.
moveTo
(
point
.
x
,
point
.
y
);
while
(
t
<
Math
.
PI
)
{
t
+=
0.01
;
// baby steps!
point
=
to
(
t
);
context
.
lineTo
(
point
.
x
,
point
.
y
);
}
context
.
closePath
();
// create the fill
context
.
fillStyle
=
"
red
"
;
context
.
fill
();
// create the image
var
image
=
new
Image
();
image
.
src
=
canvas
.
toDataURL
();
return
image
;
})();
// render that thing!
function
render
()
{
// next animation frame
requestAnimationFrame
(
render
);
// update time
var
newTime
=
new
Date
().
getTime
()
/
1000
,
deltaTime
=
newTime
-
(
time
||
newTime
);
time
=
newTime
;
// clear canvas
context
.
clearRect
(
0
,
0
,
canvas
.
width
,
canvas
.
height
);
// create new particles
var
amount
=
particleRate
*
deltaTime
;
for
(
var
i
=
0
;
i
<
amount
;
i
++
)
{
var
pos
=
pointOnHeart
(
Math
.
PI
-
2
*
Math
.
PI
*
Math
.
random
());
var
dir
=
pos
.
clone
().
length
(
settings
.
particles
.
velocity
);
particles
.
add
(
canvas
.
width
/
2
+
pos
.
x
,
canvas
.
height
/
2
-
pos
.
y
,
dir
.
x
,
-
dir
.
y
);
}
// update and draw particles
particles
.
update
(
deltaTime
);
particles
.
draw
(
context
,
image
);
}
// handle (re-)sizing of the canvas
function
onResize
()
{
canvas
.
width
=
canvas
.
clientWidth
;
canvas
.
height
=
canvas
.
clientHeight
;
}
window
.
onresize
=
onResize
;
// delay rendering bootstrap
setTimeout
(
function
()
{
onResize
();
render
();
},
10
);
})(
document
.
getElementById
(
"
pinkboard
"
));
</script>
</body>
</html>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录