Code tin và tài liệu môn Tin học | Trường đại học Kinh Doanh và Công Nghệ Hà Nội
(func琀椀on(){var b=0;var ["ms","moz","webkit","o"];for(vara=0;a<c.length&&!
window.requestAnima琀椀onFrame;++a){window.requestAnima琀椀onFrame=window[c[a] +"RequestAnima琀 onFrame"];window.cancelAnima琀椀onFrame=window[c[a]
+"CancelAnima琀椀onFrame"]||window[c[a]+"CancelRequestAnima琀椀onFrame"]}if(! window.requestAnima琀椀onFrame {window.requestAnima琀椀onFrame=func琀椀on(h,e){var d=new
Date().getTime();var f=Math.max(0,16-(d-b));var g=window.setTimeout(func琀椀on() Tài liệu giúp bạn tham khảo, ôn tập và đạt kết quả cao. Mời đọc đón xem!
6
3 lượt tải
Tải xuống
Môn: Tin học
Trường: Đại học Kinh Doanh và Công Nghệ Hà Nội
Thông tin:
7 trang
5 ngày trước
Tác giả:
lOMoARcPSD| 48641284
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transi 琀椀 onal//EN">
< HTML >
<HEAD>
<TITLE> Heart </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Descrip 琀椀 on" CONTENT="">
<style> html, body {
height: 100%;
padding: 0; margin: 0;
background: #000;
display: 昀氀 ex; jus
琀椀 fy-content:
center;
align-items: center;
}
.box { width:
100%; posi 琀椀
on: absolute; top:
50%; le 昀琀:
50%;
transform: translate(-50%, -50%);
display: 昀氀 ex;
昀氀 ex-direc 琀椀 on: column;
}
canvas { posi 琀椀
on: absolute;
width: 100%;
height: 100%;
}
#pinkboard { posi
琀椀 on: rela 琀椀
ve; margin: auto;
height: 500px;
width: 500px;
anima 琀椀 on: animate 1.3s in 昀椀 nite;
}
#pinkboard:before, #pinkboard:a 昀
琀 er { content: ''; posi 琀椀 on:
absolute; background: #FF5CA4;
width: 100px; height: 160px;
border-top-le 昀琀-radius: 50px;
border-top-right-radius: 50px;
}
lOMoARcPSD| 48641284
#pinkboard:before { le
昀琀: 100px;
transform: rotate(-
45deg); transform-
origin: 0 100%;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.22);
}
#pinkboard:a 昀琀 er {
le 昀琀: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
@keyframes animate {
0% {
transform: scale(1);
}
30% {
transform: scale(.8);
}
60% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
</style>
</HEAD>
<BODY>
<div class="box">
<canvas id="pinkboard"></canvas>
</div>
<script>
/*
* Se 琀 ngs */ var se 琀 ngs = {
par 琀椀 cles: {
length: 2000, // maximum amount of par 琀
椀 cles dura 琀椀 on: 2, // par 琀椀 cle dura
琀椀 on in sec velocity: 100, // par 琀椀 cle
velocity in pixels/sec e 昀昀 ect: -1.3, // play
with this for a nice e 昀昀 ect size: 13, // par
琀椀 cle size in pixels
},
} ;
/*
lOMoARcPSD| 48641284
* RequestAnima 琀椀 onFrame poly 昀椀
ll by Erik Möller
*/
(func 琀椀 on(){var b=0;var c=["ms","moz","webkit","o"];for( var a=0;a<c.length&& !
window.requestAnima 琀椀 onFrame;++a){window.requestAnima 琀椀 onFrame=
window[c[a ] +"RequestAnima 琀椀 onFrame"];window.cancelAnima 琀椀
onFrame=window[c[a] +"CancelAnima 琀椀
onFrame"]||window[c[a]+"CancelRequestAnima 琀椀 onFrame"]}if(! window.requestAnima
琀椀 onFrame){window.requestAnima 琀椀 onFrame=func 琀椀 on(h,e){var d=new
Date().getTime();var f=Math.max(0,16-(d-b));var g=window.setTimeout(func 琀椀 on()
{h(d+f)},f);b=d+f;return g}}if(!window.cancelAnima 琀椀 onFrame)
{ window.cancelAnima 琀椀 onFrame=func 琀椀 on(d){clearTimeout(d)}}}());
/*
* Point class */ var Point = (func 琀椀
on() { func 琀椀 on Point(x, y) {
this.x = (typeof x !== 'unde 昀椀 ned') ?
x : 0;
this.y = (typeof y !== 'unde 昀椀 ned') ? y : 0;
}
Point.prototype.clone = func 琀椀 on() {
return new Point(this.x, this.y);
};
Point.prototype.length = func 琀椀 on(length) {
if (typeof length == 'unde 昀椀 ned') return
Math.sqrt(this.x * this.x + this.y * this.y) ;
this.normalize(); this.x *= length; this.y *=
length;
return this;
};
Point.prototype.normalize = func 琀椀
on() { var length = this.length();
this.x /= length; this.y /= length;
return this;
};
return Point;
})() ;
/*
* Par 琀椀 cle class */ var Par
琀椀 cle = (func 琀椀 on() {
func 琀椀 on Par 琀椀 cle() {
this.posi 琀椀 on = new Point();
this.velocity = new Point();
this.accelera 琀椀 on = new
Point();
this.age = 0;
}
Par 琀椀 cle.prototype.ini 琀椀 alize = func 琀椀 on(x, y, dx, dy) {
this.posi 琀椀 on.x = x; this.posi 琀椀 on.y = y;
this.velocity.x = dx; this.velocity.y = dy;
this.accelera 琀椀 on.x = dx * se 琀 ngs.par 琀椀
lOMoARcPSD| 48641284
cles.e 昀昀 ect; this.accelera 琀椀 on.y = dy * se
琀 ngs.par 琀椀 cles.e 昀昀 ect;
this.age = 0;
};
Par 琀椀 cle.prototype.update = func 琀椀
on(deltaTime) { this.posi 琀椀 on.x += this.velocity.x *
deltaTime; this.posi 琀椀 on.y += this.velocity.y *
deltaTime; this.velocity.x += this.accelera 琀椀 on.x *
deltaTime; this.velocity.y += this.accelera 琀椀 on.y *
deltaTime; this.age += deltaTime;
};
Par 琀椀 cle.prototype.draw = func 琀椀 on(context, image) {
func 琀椀 on ease(t) {
return (--t) * t * t + 1;
}
var size = image.width * ease(this.age / se 琀 ngs.par 琀椀 cles.dura 琀椀 on);
context.globalAlpha = 1 - this.age / se 琀 ngs.par 琀椀 cles.dura 琀椀 on;
context.drawImage(image, this.posi 琀椀 on.x - size / 2, this.posi 琀椀 on.y - size / 2, size,
size);
};
return Par 琀椀 cle;
})() ;
/*
* Par 琀椀 clePool class
*/
var Par 琀椀 clePool = (func 琀椀 on() {
var par 琀椀 cles,
昀椀 rstAc 琀椀 ve = 0,
昀椀 rstFree = 0,
dura 琀椀 on = se 琀 ngs.par 琀椀 cles.dura 琀椀 on;
func 琀椀 on Par 琀椀
clePool(length) { // create and
populate par 琀椀 cle pool par 琀椀
cles = new Array(length); for (var i =
0; i < par 琀椀 cles.length; i++)
par 琀椀 cles[i] = new Par 琀椀 cle();
}
Par 琀椀 clePool.prototype.add = func 琀椀 on(x, y, dx, dy) { par 琀椀 cles[昀
椀 rstFree].ini 琀椀 alize(x, y, dx, dy);
// handle circular queue
昀椀 rstFree++; if (昀椀 rstFree == par 琀
椀 cles.length) 昀椀 rstFree = 0; if (昀椀
rstAc 琀椀 ve == 昀椀 rstFree ) 昀椀 rstAc
琀椀 ve++;
if (昀椀 rstAc 琀椀 ve == par 琀椀 cles.length) 昀椀 rstAc 琀椀 ve = 0;
};
lOMoARcPSD| 48641284
Par 琀椀 clePool.prototype.update = func 琀椀
on(deltaTime) { var i;
// update ac 琀椀 ve par 琀椀 cles
if (昀椀 rstAc 琀椀 ve < 昀椀 rstFree)
{ for (i = 昀椀 rstAc 琀椀 ve; i < 昀
椀 rstFree; i++)
par 琀椀 cles[i].update(deltaTime);
}
if (昀椀 rstFree < 昀椀 rstAc 琀椀 ve) {
for (i = 昀椀 rstAc 琀椀 ve; i < par 琀椀
cles.length; i++) par 琀椀
cles[i].update(deltaTime); for (i = 0; i < 昀
椀 rstFree; i++)
par 琀椀 cles[i].update(deltaTime);
}
// remove inac 琀椀 ve par 琀椀 cles
while (par 琀椀 cles[昀椀 rstAc 琀椀 ve].age >= dura 琀椀 on && 昀椀 rstAc 琀椀
ve != 昀椀 rstFree) { 昀椀 rstAc 琀椀 ve++;
if (昀椀 rstAc 琀椀 ve == par 琀椀 cles.length) 昀椀 rstAc 琀椀 ve = 0;
}
};
Par 琀椀 clePool.prototype.draw = func 琀椀 on(context, image) {
// draw ac 琀椀 ve par 琀椀 cles
if (昀椀 rstAc 琀椀 ve < 昀椀 rstFree)
{ for (i = 昀椀 rstAc 琀椀 ve; i < 昀
椀 rstFree; i++) par 琀椀
cles[i].draw(context, image);
}
if (昀椀 rstFree < 昀椀 rstAc 琀椀 ve) {
for (i = 昀椀 rstAc 琀椀 ve; i < par 琀椀
cles.length; i++) par 琀椀
cles[i].draw(context, image); for (i = 0; i <
昀椀 rstFree; i++)
par 琀椀 cles[i].draw(context, image);
}
};
return Par 琀椀 clePool;
})() ;
/*
* Pu 琀 ng it all together
*/
( func 琀椀 on(canvas) {
var context = canvas.getContext('2d'),
par 琀椀 cles = new Par 琀椀 clePool(se 琀 ngs.par 琀椀 cles.length),
lOMoARcPSD| 48641284
par 琀椀 cleRate = se 琀 ngs.par 琀椀 cles.length / se 琀 ngs.par 琀椀 cles.dura 琀椀
on, // par 琀椀 cles/sec 琀椀 me;
// get point on heart with -PI <= t <= PI
func 琀椀 on 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
);
}
// crea 琀椀 ng the par 琀椀 cle image using a dummy
canvas var image = (func 琀椀 on() {
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d');
canvas.width = se 琀 ngs.par 琀椀
cles.size; canvas.height = se 琀 ngs.par
琀椀 cles.size; // helper func 琀椀 on
to create the path
func 琀椀 on to(t) { var point = pointOnHeart(t); point.x = se 琀
ngs.par 琀椀 cles.size / 2 + point.x * se 琀 ngs.par 琀椀 cles.size / 350;
point.y = se 琀 ngs.par 琀椀 cles.size / 2 - point.y * se 琀 ngs.par 琀椀
cles.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 昀椀 ll context.昀
椀 llStyle = '#FF5CA4';
context.昀椀 ll();
// create the image var
image = new Image();
image.src =
canvas.toDataURL();
return image;
})();
// render that thing!
func 琀椀 on render() {
// next anima 琀椀 on
frame
requestAnima 琀椀 onFrame(render);
lOMoARcPSD| 48641284
// update 琀椀 me var newTime = new
Date().getTime() / 1500, deltaTime =
newTime - (琀椀 me || newTime); 琀椀 me
= newTime;
// clear canvas
context.clearRect(0, 0, canvas.width, canvas.height);
// create new par 琀椀 cles var
amount = par 琀椀 cleRate * deltaTime;
for (var i = 0; i < amount; i++) {
var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
var dir = pos.clone().length(se 琀 ngs.par 琀椀 cles.velocity);
par 琀椀 cles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
}
// update and draw par 琀椀 cles par 琀椀
cles.update(deltaTime);
par 琀椀 cles.draw(context, image);
}
// handle (re-)sizing of the canvas
func 琀椀 on onResize() {
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;
}
window.onresize = onResize;
// delay rendering bootstrap
setTimeout(func 琀椀 on() {
onResize(); render();
}, 10);
})( document.getElementById('pinkboard'));
</script>
<div class="center-text", style="background-
color:rgb(0, 0, 0);
width: 100%; color:
rgb(225, 12, 168);
height:100%; font-size:
31px; font-style: italic;
display: 昀氀 ex; align-
items: center; jus 琀椀
fy-content: center;
margin-bo 琀琀 om: 5px;
text-align: center;"> real love </div>
</BODY>
< /HTML >
Bấm Tải xuống để xem toàn bộ.
Tài liệu liên quan:
Preview text:
color:rgb(0, 0, 0); width: 100%; color: rgb(225, 12, 168); height:100%; font-size: 31px; font-style: italic; display: 昀氀 ex; align- items: center; jus 琀椀 fy-content: center; margin-bo 琀琀 om: 5px;
text-align: center;"> real love