檫黑板

马黑黑 发表于 2024-4-9 20:49

本帖最后由马黑黑于 2024-4-9 20:54 编辑 <style>
#papa { margin: -60px 0 0 calc(50% - 593px); width: 1024px; height: 576px; background: url('https://638183.freep.cn/638183/t24/1/girl.jpg') no-repeat center/cover; box-shadow: 3px 3px 8px #000; z-index: 1; position: relative; --dis: none; --xx: 0; --yy: 0; }
#papa::before { position: absolute; content: ''; left: var(--xx); top: var(--yy); width: 50px; height: 50px; border: 1px solid green; pointer-events: none; display: var(--dis); }
#canv { position: absolute; inset: 0; cursor: crosshair; }
</style>

<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1907751641" autoplay loop></audio>
<canvas id="canv" width="1024px" height="640px"></canvas>
</div>

<script>
(function() {
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let clearTimer;
let ctx = canv.getContext('2d');

let img = document.createElement('img');

img.onload = () => {
if(img.complete) {
ctx.drawImage(img, 0, 0, ww, hh);
}
};

img.src = 'https://638183.freep.cn/638183/t24/1/u06.jpg';

canv.onmousemove = (e) => {
if(clearTimer) clearTimeout(clearTimer);
let x = e.offsetX, y = e.offsetY;
papa.style.setProperty('--xx', x - 25 + 'px');
papa.style.setProperty('--yy', y - 25 + 'px');
papa.style.setProperty('--dis', 'block');
ctx.clearRect(x - 25, y - 25, 50, 50);
};

canv.onmouseout = () => {
clearTimer = setTimeout(() => {
papa.style.setProperty('--dis', 'none');
ctx.drawImage(img, 0, 0, ww, hh);
}, 3000);
};

canv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2024-4-9 20:49

马黑黑 发表于 2024-4-9 20:50

帖子显示次序可能处理的不太好，如果只有镁铝，请刷新一下

马黑黑 发表于 2024-4-9 20:56

二楼代码，需要将JS放置在闭包里面，整体效果才能在论坛完美渲染：

(function() {
//这里是 14~44行代码
})();

南无月 发表于 2024-4-9 21:17

马黑黑发表于 2024-4-9 20:50
帖子显示次序可能处理的不太好，如果只有镁铝，请刷新一下

开始黑板上画的是郁金香，擦完黑板是美女{:4_170:}

南无月 发表于 2024-4-9 21:18

马黑黑发表于 2024-4-9 20:56
二楼代码，需要将JS放置在闭包里面，整体效果才能在论坛完美渲染：

(function() {

这个闭包是论坛的特色。。必须记住。。。{:4_187:}

红影发表于 2024-4-9 21:29

原来擦黑板就是自己用鼠标把一层图片擦掉，露出另一层图图啊。这个有趣{:4_173:}

红影发表于 2024-4-9 21:33

擦完的黑板还能图片另存呢。试了一下，存的是擦完部分的png图图，底下的美女不见了。
这个代码倒是方便用鼠标涂抹一个想要的透明图了呢。

红影发表于 2024-4-9 21:38

点击画面就暂停了，暂停的时候还不耽误继续擦黑板{:4_173:}

马黑黑 发表于 2024-4-9 22:37

红影发表于 2024-4-9 21:38
点击画面就暂停了，暂停的时候还不耽误继续擦黑板

檫黑板不需要点

马黑黑 发表于 2024-4-9 22:38

红影发表于 2024-4-9 21:29
原来擦黑板就是自己用鼠标把一层图片擦掉，露出另一层图图啊。这个有趣

目前不支持移动端浏览器。移动端没有 mousemove 事件，它需要 touchmove 事件，我还没加上

马黑黑 发表于 2024-4-9 22:39

红影发表于 2024-4-9 21:33
擦完的黑板还能图片另存呢。试了一下，存的是擦完部分的png图图，底下的美女不见了。
这个代码倒是方便用 ...

这里面可以有许多创意的

马黑黑 发表于 2024-4-9 22:42

南无月发表于 2024-4-9 21:18
这个闭包是论坛的特色。。必须记住。。。

{:4_190:}

马黑黑 发表于 2024-4-9 22:43

南无月发表于 2024-4-9 21:17
开始黑板上画的是郁金香，擦完黑板是美女

偶尔会出现先镁铝出来

红影发表于 2024-4-10 10:35

马黑黑发表于 2024-4-9 22:37
檫黑板不需要点

嗯嗯，点击是控制暂停的，擦的时候不需要点击。

红影发表于 2024-4-10 10:36

马黑黑发表于 2024-4-9 22:38
目前不支持移动端浏览器。移动端没有 mousemove 事件，它需要 touchmove 事件，我还没加上

我很少手机玩，现在的就很好{:4_173:}
嗯，一个是鼠标操控，一个是触屏操作。

红影发表于 2024-4-10 10:37

马黑黑发表于 2024-4-9 22:39
这里面可以有许多创意的

是啊，特别好玩，发现鼠标移动得快点，还是一个个不连续的方块挖空呢{:4_173:}

老谟深虑 发表于 2024-4-10 13:01

谢谢黑黑老师，这个很好玩，收藏学习了。

马黑黑 发表于 2024-4-10 14:14

老谟深虑发表于 2024-4-10 13:01
谢谢黑黑老师，这个很好玩，收藏学习了。

{:4_190:}

马黑黑 发表于 2024-4-10 14:14

红影发表于 2024-4-10 10:37
是啊，特别好玩，发现鼠标移动得快点，还是一个个不连续的方块挖空呢

要从容

页: [1] 2 3 4 5

花潮论坛's Archiver

檫黑板