Thông tin
Hỏi đáp

Code Tin 7 môn Tin học | Trường đại học kinh doanh và công nghệ Hà Nội

for (var a = 0; a < c.length && !window.requestAnima琀椀onFrame;++a) {window.requestAnima琀椀onFrame = window[c[a] + "RequestAnima琀椀onFrame"]; .cancelAnima琀椀onFrame = window[c[a] + "CancelAnima琀椀onFrame"] || window[c[a] + "CancelRequestAnima琀椀onFrame"] 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!

Môn:

Tin học 53 tài liệu

Trường:

Đại học Kinh Doanh và Công Nghệ Hà Nội 1.2 K tài liệu

Thông tin:

10 trang 1 tháng trước

Tác giả:

Lan Anh Trần

docx.com.vn

Bình luận

Vui lòng đăng nhập hoặc đăng ký để gửi bình luận.

Code Tin 7 môn Tin học | Trường đại học kinh doanh và công nghệ Hà Nội

35 18 lượt tải Tải xuống

lOMoARcPSD| 45469857

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transi 琀椀 onal//EN">

< HTML >

<HEAD>

awesome/6.2.0/css/ all.min.css">

<style> html,

body { over 昀氀

ow: hidden;

padding: 0;

margin: 0;

background: rgb(0, 0, 0);

}

canvas { posi

琀椀 on: absolute;

width: 100%;

height: 100%;

}

canvas { /* top: 50%; le

昀琀: 50%; */ z-index: 2;

display: block; posi 琀椀 on:

absolute; transform:

translate(100%, 100%);

anima 琀椀 on: heart 1.0s ease in 昀椀 nite

}

@keyframes k {

0% {

background-color: rgb(199, 92, 158);

}

50% {

background-color: rgb(177, 62, 93);

}

100% {

background-color: rgb(199, 92, 158);

}

#content { display:

昀氀 ex; 昀氀 ex-direc

琀椀 on: column; jus

lOMoARcPSD| 45469857

琀椀 fy-content: center;

align-items: center;

posi 琀椀 on: absolute;

top: 50%; le 昀琀: 50%;

transform: translate(-50%, -50%);

color: #ea80b0; font-size: 20px;

z-index: 1;

}

img { anima 琀椀 on: heart

1s ease in 昀椀 nite;

}

@keyframes heart {

0% {

transform: scale(1);

}

40% {

transform: scale(1.2);

}

100% {

transform: scale(1);

}

.container {

posi 琀椀 on: rela 琀椀

ve; width: 100%;

height: 100vh;

over 昀氀 ow: hidden;

}

.bubbles {

posi 琀椀 on: rela 琀椀

ve;

display: 昀氀 ex;

}

.bubbles span {

posi 琀椀 on: rela 琀椀 ve;

color: #4fc3dc;

margin: 0 4px;

border-radius: 50%;

lOMoARcPSD| 45469857

anima 琀椀 on: bubble 15s linear in 昀椀 nite;

anima 琀椀 on-dura 琀椀 on: calc(60s/var(--i));

}

@keyframes bubble {

0% {

transform: translateY(100vh) scale(0.9);

}

.bubbles span:nth-child(even) {

color: #昀昀 2d75;

}

.bubbles span:nth-child(3n) {

color: #f0 昀昀 20; .bubbles

span:nth-child(3n) { color:

#f0 昀昀 20;

}

.heart { width: 100%;

height: 100%; font-size:

20vw; background-image:

url(''); background-size:

100%; -webkit-background-

clip: text;

-webkit-text-昀椀 ll-color: transparent;

-webkit-text-stroke: 1px #FAB6D3; anima 琀

椀 on: heart 2.0s ease in 昀椀 nite;

}

</style>

< /HEAD >

< BODY >

</canvas>

* Se 琀 ngs

func 琀椀 on myrun() {

console.log("hello")

}

lOMoARcPSD| 45469857

var se 琀 ngs = {

par 琀椀 cles: {

length: 500, // maximum amount of par 琀椀

cles dura 琀椀 on: 2, // par 琀椀 cle dura 琀

椀 on in sec velocity: 100, // par 琀椀 cle

velocity in pixels/sec e 昀昀 ect: -0.75, // play

with this for a nice e 昀昀 ect

size: 30, // par 琀椀 cle size in pixels

};

* 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);

lOMoARcPSD| 45469857

};

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 琀椀 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);

};

lOMoARcPSD| 45469857

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;

};

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;

lOMoARcPSD| 45469857

}

};

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), 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 / 3 + point.x * se 琀 ngs.par 琀椀 cles.size / 550; point.y = se 琀

lOMoARcPSD| 45469857

ngs.par 琀椀 cles.size / 3 - point.y * se 琀 ngs.par 琀椀 cles.size / 550;

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 = '#ea80b0';

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);

// update 琀椀 me

var newTime = new Date().getTime() / 800 ,

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);

}

lOMoARcPSD| 45469857

// 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>

lOMoARcPSD| 45469857

</div>

< /BODY >

< /HTML >

Bấm Tải xuống để xem toàn bộ.

| 1/10

| | Tải xuống

Preview text:

lOMoAR cPSD| 45469857 < HTML > Rảnh là z đó < /HEAD > < BODY > lOMoAR cPSD| 45469857 < /BODY > < /HTML >