手电筒

模拟手电筒
当前为 2022-11-07 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         手电筒
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  模拟手电筒
// @author       伟大大
// @match        https://learnku.com/articles/72938
// @icon         https://s1.ax1x.com/2022/11/07/xj7TVf.png
// @grant        none
// @license MIT
// ==/UserScript==

(function() {
    'use strict';

    // 添加按钮
    let Container = document.createElement('div');
    Container.id = "sp-ac-container";
    Container.style.position="fixed"
    Container.style.top="40px"
    Container.style['z-index']="999999"
    Container.innerHTML =`<button id="myCustomize" style="position:absolute; left:30px; top:20px">手电筒</button>`

    //绑定按键点击功能
	Container.onclick = function (){
		main.open();
		return;
	};

    // 追加
    document.body.appendChild(Container);

    // 添加关闭按钮
    let Container1 = document.createElement('div');
    Container1.id = "sp-ac-container";
    Container1.style.position="fixed"
    Container1.style.top="40px"
    Container1.style['z-index']="999999"
    Container1.innerHTML =`<button id="myCustomize" style="position:absolute; left:30px; top:90px">关闭</button>`

    //绑定按键点击功能
	Container1.onclick = function (){
		main.close();
		return;
	};
    // 追加
    document.body.appendChild(Container1);

    let main = {
        open(){
            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()
            }
        },
        close(){
          document.querySelector('canvas').remove()
          document.querySelector('style').remove('canvas')
        }
    };

})();