TO黑老师代码 闺中训
本帖最后由 有声有色 于 2025-9-7 10:14 编辑 <br /><br /></div></div><div class="pct"><style type="text/css">.pcb{margin-right:0}</style><div class="pcb">
<div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1690382">
<style>
#papa { left: -242px; top:120px; width: 1080px; height: 680px; background: url('https://pic1.imgdb.cn/item/6699ced4d9c307b7e9838763.png') no-repeat center/cover; box-shadow: -20px 20px 100px #000; overflow: hidden; position: relative; }
#canv { position: absolute; width: 700px; height: 580px;left:400px;top:10px;opacity: .15; }
#disc { position: absolute; width: 40px; height: 40px; right: 150px; bottom: 12px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }
#tit { position: absolute; right: 266px; bottom: 10px;font: bold 22px / 40px sans-serif; color: lightgray; text-shadow: 1px 1px 2px black; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<canvas id="canv"></canvas>
<span id="disc"></span>
<span id="tit">静坐闺房中，诗书伴晨昏，听训女儿经，谁知奴心扉？</span>
<div style="position: absolute; left:10px; bottom: 0px; width:450px;">
<img alt="" src=""/>
</div>
</div><br><br><br><br><br><br>
<script>
let aud = new Audio();
aud.src = 'https://music.163.com/song/media/outer/url?id=1432248595.mp3';
aud.loop = true;
aud.autoplay = true;
disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing',()=> disc.style.animationPlayState = 'running');
aud.addEventListener('pause',()=> disc.style.animationPlayState = 'paused');
(function main() {
let canv = document.getElementById('canv');
let ctx = canv.getContext('2d');
canv.width = canv.clientWidth;
canv.height = canv.clientHeight;
let dropList = [], linelist = [], mousePos = ;
let gravity = 0.5, mouseDis = 35, lineNum = 20, speedx = 0, maxspeedx = 0;
window.onmousemove = function (e) {
mousePos = e.clientX - offset(canv).x;
mousePos = e.clientY - offset(canv).y;
maxspeedx = (e.clientX - canv.clientWidth / 2) / (canv.clientWidth / 2);
}
function createLine(e) {
let temp = 0.25 * (50 + Math.random() * 100);
let line = {
speed: 5.5 * (Math.random() * 6 + 3),
die: false,
posx: e,
posy: -50,
h: temp,
corlor: '#eee'
};
linelist.push(line);
}
function createDrop(x, y) {
let drop = {
die: false,
posx: x,
posy: y,
vx: (Math.random() - 0.5) * 8,
vy: Math.random() * (-6) - 3,
radius: Math.random() * 1.5 + 1
};
return drop;
}
function madedrops(x, y) {
let maxi = Math.floor(Math.random() * 5 + 5);
for (let i = 0; i < maxi; i++) {
dropList.push(createDrop(x, y));
}
}
window.requestAnimationFrame(update);
function update() {
if (dropList.length > 0) {
dropList.forEach(function (e) {
e.vx = e.vx + (speedx / 2);
e.posx = e.posx + e.vx;
e.vy = e.vy + gravity;
e.posy = e.posy + e.vy;
if (e.posy > canv.clientHeight) {
e.die = true;
}
});
}
for (let j = dropList.length - 1; j >= 0; j--) {
if (dropList.die) {
dropList.splice(j, 1);
}
}
speedx = speedx + (maxspeedx - speedx) / 50;
for (let i = 0; i < lineNum; i++) {
createLine(Math.random() * 2 * canv.width - (0.5 * canv.width));
}
let endLine = canv.clientHeight - Math.random() * canv.clientHeight / 5;
linelist.forEach(function (e) {
let dis = Math.sqrt(((e.posx + speedx * e.h) - mousePos) * ((e.posx + speedx * e.h)
- mousePos) + (e.posy + e.h - mousePos) * (e.posy + e.h - mousePos));
if (dis < mouseDis) {
e.die = true;
madedrops(e.posx + speedx * e.h, e.posy + e.h);
}
if ((e.posy + e.h) > endLine) {
e.die = true;
madedrops(e.posx + speedx * e.h, e.posy + e.h);
}
if (e.posy >= canv.clientHeight) {
e.die = true;
} else {
e.posy = e.posy + e.speed;
e.posx = e.posx + e.speed * speedx;
}
});
for (let j = linelist.length - 1; j >= 0; j--) {
if (linelist.die) {
linelist.splice(j, 1);
}
}
render();
window.requestAnimationFrame(update);
}
function render() {
ctx.fillRect(0, 0, canv.width, canv.height);
ctx.lineWidth = 1;
linelist.forEach(function (line) {
ctx.strokeStyle = line.color;
ctx.beginPath();
ctx.moveTo(line.posx, line.posy);
ctx.lineTo(line.posx + line.h * speedx, line.posy + line.h);
ctx.stroke();
});
ctx.lineWidth = 0.5;
ctx.strokeStyle = "#fff";
dropList.forEach(function (e) {
ctx.beginPath();
ctx.arc(e.posx, e.posy, e.radius, Math.random() * Math.PI * 2, 1 * Math.PI);
ctx.stroke();
});
}
function offset(ele) {
let x = ele.offsetLeft, y = ele.offsetTop, pa = ele.offsetParent;
while(pa != null) {
x += pa.offsetLeft;
y += pa.offsetTop;
pa = pa.offsetParent;
}
return {x,y};
}
})();
</script></td></tr></table>
这个做的也是不错，你可以发水区，这种应该是学习黑黑教程后的作业。 这个做得漂亮，底图还是动态的呢，真美。欣赏有声有色好帖{:4_187:} 画布可以再往右点，或者缩小画布的横向尺寸，这样就不会遮挡人物面部了。最好让画布范围正好卡在窗棱上，这样影响会最小{:4_204:} 小辣椒 发表于 2022-8-26 15:42
这个做的也是不错，你可以发水区，这种应该是学习黑黑教程后的作业。
我想水区是你们精英玩的区域，我就在这里混混算了。谢谢 红影 发表于 2022-8-26 16:36
这个做得漂亮，底图还是动态的呢，真美。欣赏有声有色好帖
谢谢 红影 发表于 2022-8-26 16:38
画布可以再往右点，或者缩小画布的横向尺寸，这样就不会遮挡人物面部了。最好让画布范围正好卡在窗棱上，这 ...
谢谢指教，现正我在平板上看，明天在电脑再修改，谢谢了 有声有色 发表于 2022-8-26 16:39
谢谢
不客气啊，这个非常漂亮呢{:4_187:} 有声有色 发表于 2022-8-26 19:09
谢谢指教，现正我在平板上看，明天在电脑再修改，谢谢了
指教两字不敢当，只是感觉让画布的大小跟被背景的框等边缘结合起来是最好的，这样更自然点{:4_204:} 红影 发表于 2022-8-26 20:05
指教两字不敢当，只是感觉让画布的大小跟被背景的框等边缘结合起来是最好的，这样更自然点
我已修改了，这样行不行。谢谢了 有声有色 发表于 2022-8-27 11:24
我已修改了，这样行不行。谢谢了
感觉画布还要往右一点，我帮您直接调得右边点了，您再看看？ 红影 发表于 2022-8-27 19:56
感觉画布还要往右一点，我帮您直接调得右边点了，您再看看？
谢谢了
有声有色 发表于 2022-8-28 07:43
谢谢了
不客气{:4_173:}
页:
[1]