帖子代码
<style>
#canv { display: block; position: relative; margin: 20px auto; background: url('https://638183.freep.cn/638183/t24/webp/girl.webp') no-repeat center/cover; cursor: crosshair; }
</style>
<canvas id="canv" width="628" height="667"></canvas>
<audio src="https://music.163.com/song/media/outer/url?id=864823940" id="aud" autoplay loop></audio>
<script>
let ww = canv.width, hh = canv.height, rr = 60;
let radius = rr;
let ctx = canv.getContext('2d');
let mask = () => {
ctx.clearRect(0, 0, ww, hh);
ctx.save();
ctx.fillStyle = 'rgba(0,0,0,.8)';
ctx.fillRect(0, 0, ww, hh);
ctx.restore();
};
let lighting = (x,y) => {
ctx.clearRect(0, 0, ww, hh);
mask();
ctx.save();
ctx.globalCompositeOperation ='xor';
ctx.fillStyle = 'green';
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2*Math.PI);
ctx.fill();
ctx.restore();
};
canv.onpointermove = (e) => {
if(radius < rr) radius = rr;
lighting(e.offsetX, e.offsetY);
}
canv.onpointerout = () => {
mask();
radius = rr;
}
canv.onwheel = (e) => {
e.preventDefault();
radius += e.deltaY * 0.25;
if(radius < 0) radius = 0;
lighting(e.offsetX, e.offsetY, radius);
};
canv.onclick = () => aud.paused ? aud.play() : aud.pause();
mask();
</script>
| 
发表于 2024-4-11 11:51
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2024-4-11 12:13
