{"id":229,"date":"2020-03-25T23:37:52","date_gmt":"2020-03-25T15:37:52","guid":{"rendered":"https:\/\/t2t2.cc\/?p=229"},"modified":"2020-03-25T23:37:52","modified_gmt":"2020-03-25T15:37:52","slug":"%e6%96%b0%e5%a2%9e%e4%ba%86%e9%bc%a0%e6%a0%87%e7%82%b9%e5%87%bb%e7%89%b9%e6%95%88","status":"publish","type":"post","link":"https:\/\/t2t2.cc\/?p=229","title":{"rendered":"\u65b0\u589e\u4e86\u9f20\u6807\u70b9\u51fb\u7279\u6548"},"content":{"rendered":"\n

\u611f\u8c22v2ex\u7528\u6237zerision\u63d0\u4f9b\u7684\u9f20\u6807\u70b9\u51fb\u7279\u6548\u6e90\u7801 \u539f\u5e16\uff1ahttps:\/\/www.v2ex.com\/t\/656062<\/a><\/p>\n\n\n

\nfunction clickEffect() {\n    let balls = [];\n    let longPressed = false;\n    let longPress;\n    let multiplier = 0;\n    let width, height;\n    let origin;\n    let normal;\n    let ctx;\n    const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];\n    const canvas = document.createElement("canvas");\n    document.body.appendChild(canvas);\n    canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");\n    const pointer = document.createElement("span");\n    pointer.classList.add("pointer");\n    document.body.appendChild(pointer);\n\n    if (canvas.getContext && window.addEventListener) {\n        ctx = canvas.getContext("2d");\n        updateSize();\n        window.addEventListener('resize', updateSize, false);\n        loop();\n        window.addEventListener("mousedown", function(e) {\n            pushBalls(randBetween(10, 20), e.clientX, e.clientY);\n            document.body.classList.add("is-pressed");\n            longPress = setTimeout(function() {\n                document.body.classList.add("is-longpress");\n                longPressed = true;\n            }, 500);\n        }, false);\n        window.addEventListener("mouseup", function(e) {\n            clearInterval(longPress);\n            if (longPressed == true) {\n                document.body.classList.remove("is-longpress");\n                pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);\n                longPressed = false;\n            }\n            document.body.classList.remove("is-pressed");\n        }, false);\n        window.addEventListener("mousemove", function(e) {\n            let x = e.clientX;\n            let y = e.clientY;\n            pointer.style.top = y + "px";\n            pointer.style.left = x + "px";\n        }, false);\n    } else {\n        console.log("canvas or addEventListener is unsupported!");\n    }\n\n    function updateSize() {\n        canvas.width = window.innerWidth * 2;\n        canvas.height = window.innerHeight * 2;\n        canvas.style.width = window.innerWidth + 'px';\n        canvas.style.height = window.innerHeight + 'px';\n        ctx.scale(2, 2);\n        width = (canvas.width = window.innerWidth);\n        height = (canvas.height = window.innerHeight);\n        origin = {\n            x: width \/ 2,\n            y: height \/ 2\n        };\n        normal = {\n            x: width \/ 2,\n            y: height \/ 2\n        };\n    }\n    class Ball {\n        constructor(x=origin.x, y=origin.y) {\n            this.x = x;\n            this.y = y;\n            this.angle = Math.PI * 2 * Math.random();\n            if (longPressed == true) {\n                this.multiplier = randBetween(14 + multiplier, 15 + multiplier);\n            } else {\n                this.multiplier = randBetween(6, 12);\n            }\n            this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);\n            this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);\n            this.r = randBetween(8, 12) + 3 * Math.random();\n            this.color = colours[Math.floor(Math.random() * colours.length)];\n        }\n        update() {\n            this.x += this.vx - normal.x;\n            this.y += this.vy - normal.y;\n            normal.x = -2 \/ window.innerWidth * Math.sin(this.angle);\n            normal.y = -2 \/ window.innerHeight * Math.cos(this.angle);\n            this.r -= 0.3;\n            this.vx *= 0.9;\n            this.vy *= 0.9;\n        }\n    }\n\n    function pushBalls(count=1, x=origin.x, y=origin.y) {\n        for (let i = 0; i < count; i++) {\n            balls.push(new Ball(x,y));\n        }\n    }\n\n    function randBetween(min, max) {\n        return Math.floor(Math.random() * max) + min;\n    }\n\n    function loop() {\n        ctx.fillStyle = "rgba(255, 255, 255, 0)";\n        ctx.clearRect(0, 0, canvas.width, canvas.height);\n        for (let i = 0; i < balls.length; i++) {\n            let b = balls[i];\n            if (b.r < 0)\n                continue;\n            ctx.fillStyle = b.color;\n            ctx.beginPath();\n            ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);\n            ctx.fill();\n            b.update();\n        }\n        if (longPressed == true) {\n            multiplier += 0.2;\n        } else if (!longPressed && multiplier >= 0) {\n            multiplier -= 0.4;\n        }\n        removeBall();\n        requestAnimationFrame(loop);\n    }\n\n    function removeBall() {\n        for (let i = 0; i < balls.length; i++) {\n            let b = balls[i];\n            if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) {\n                balls.splice(i, 1);\n            }\n        }\n    }\n}\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"
\u611f\u8c22v2ex\u7528\u6237zerision\u63d0\u4f9b\u7684\u9f20\u6807\u70b9\u51fb\u7279\u6548\u6e90\u7801 \u539f\u5e16\uff1ahttps:\/\/www.v2ex.com\/t\/6… Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-229","post","type-post","status-publish","format-standard","hentry","category-data"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t