在learnku网址上加手电筒效果

相关代码

  document.querySelector('style').append(`canvas {
        position: fixed;
        left:0;
        top: 0;
        z-index: 9999;
        pointer-events: none;
    }`)
    document.body.appendChild(document.createElement('canvas'))
    const cvs = document.querySelector('canvas')
    const ctx = cvs.getContext('2d')
    cvs.width = document.documentElement.clientWidth
    cvs.height = document.documentElement.clientHeight
    const p = {
        x: 0,
        y: 0,
        r: 50
    }
    document.onmousemove = e => {
        p.x = e.clientX
        p.y = e.clientY
        render()
    }
    const render = () => {
        ctx.beginPath()
        ctx.clearRect(0, 0, cvs.width, cvs.height)
        var radial = ctx.createRadialGradient(p.x,p.y,p.r,p.x,p.y,p.r * 3);
        radial.addColorStop(0,'rgba(255, 255, 255, 0)');
        radial.addColorStop(1,'rgba(0, 0, 0, 0.5)');
        ctx.fillStyle = radial;
        ctx.fillRect(0,0,cvs.width, cvs.height);
    }
    render()
    window.onresize = () => {
        cvs.width = document.documentElement.clientWidth
        cvs.height = document.documentElement.clientHeight
        render()
    }

操作

按F12打开控制台,复制上面代码找到console,然后粘贴回车即可

在learnku网址上加手电筒效果

效果

在learnku网址上加手电筒效果

本作品采用《CC 协议》,转载必须注明作者和本文链接
本帖由系统于 3周前 自动加精
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。
讨论数量: 43
Mutoulee

干啥用的呢?

3周前 评论
my38778570 (楼主) 3周前

整个油猴脚本怎么样!你不介意的话,我就复制走了! :see_no_evil:

3周前 评论
my38778570 (楼主) 3周前
justmd5 3周前
Sw-A 2周前
lddtime (作者) 2周前

挺好玩呀

3周前 评论
my38778570 (楼主) 3周前

好会玩啊:se

3周前 评论
my38778570 (楼主) 3周前

咋个才能加书签呢 你这个

3周前 评论
my38778570 (楼主) 3周前
heroColin (作者) 3周前
DogLoML 2周前
黑将军

好玩,其他网站也适用

3周前 评论
my38778570 (楼主) 3周前

这个不错啊,赞

3周前 评论

油猴脚本 网页手电筒 欢迎大家体验

@justmd5 还不太会弄这个脚本,调了好几次,有时候打开页面不生效

3周前 评论
sreio 3周前

厉害了,挺好玩儿这个

3周前 评论

你小子还真是纱布擦屁股,露了一手

3周前 评论
my38778570 (楼主) 3周前
sreio
3周前 评论
lddtime 3周前
sreio (作者) 2周前
sreio (作者) 2周前
lddtime 2周前
lddtime 2周前
sreio (作者) 2周前
sreio (作者) 2周前
const p = {
        x: 0,
        y: 0,
        r: 80
    }

手电筒的光圈半径大一点好看点,50有点小,啊哈哈

3周前 评论
sreio
2周前 评论
wongvio 2周前
sreio (作者) 2周前
sreio (作者) 2周前
sreio (作者) 2周前
wongvio 2周前
sreio

file

2周前 评论
my38778570 (楼主) 2周前

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!