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

学习黑黑老师《擦黑板》代码

本帖最后由 老谟深虑 于 2024-4-11 15:13 编辑 <br /><br /><style>
        #papa { margin: -60px 0 0 calc(50% - 593px); width: 1024px; height: 576px; background: url('https://s21.ax1x.com/2024/04/10/pFOqivQ.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=1898458945" 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://s21.ax1x.com/2024/04/10/pFOqDrd.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-10 19:26

有意思，擦完黑板美人现。欣赏老谟深虑好帖{:4_187:}

老谟深虑 发表于 2024-4-11 12:16

红影 发表于 2024-4-10 19:26
有意思，擦完黑板美人现。欣赏老谟深虑好帖

         谢谢老师的收看点评。

红影 发表于 2024-4-11 22:27

老谟深虑 发表于 2024-4-11 12:16
谢谢老师的收看点评。

不客气啊，问好{:4_187:}
页: [1]
查看完整版本: 学习黑黑老师《擦黑板》代码