用html+js实现聚光灯效果【建议收藏】

人生处处是舞台，人需要聚光灯，代码也需要聚光灯，这里就分享一个如何做聚光灯的效果，欢迎大家将代码拿去尝试；

1、效果展示

2、代码分享

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>手电筒聚光效果</title>
</head>
<style></style><body><h1>hello world</h1>
</body>
<script>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.clientWidthcvs.height = document.documentElement.clientHeightconst p = {x: 0,y: 0,r: 50}document.onmousemove = e => {p.x = e.clientXp.y = e.clientYrender()}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.clientWidthcvs.height = document.documentElement.clientHeightrender()}
</script></html>

用html+js实现聚光灯效果【建议收藏】相关推荐

js map 排序_数组方法写给女友的一系列 JS 数组操作（建议收藏 | 内附思维导图）...
前言最近和女友,咳咳...(说出来可能会被打s)学习JS数组方法,用几个字形容的话就是听说过,实际使用.遇到的时候就分不清具体方法会得到怎样的结果. 今天我将通过这篇文章好好整理一下关于JS数组的方 ...
「数组方法」写给女友的一系列 JS 数组操作（建议收藏 | 内附思维导图）
前言最近和女友,咳咳-(说出来可能会被打s)学习JS数组方法,用几个字形容的话就是听说过,实际使用.遇到的时候就分不清具体方法会得到怎样的结果. 今天我将通过这篇文章好好整理一下关于JS数组的方法, ...
canvas实现聚光灯效果（js）
效果展示: 源码展示: <!doctype html> <html> <head><meta charset="utf-8">< ...
JavaScript常用工具类大全（50套原生js方法）建议收藏
原生JavaScript实现字符串长度截取 function cutstr(str, len) {var temp;var icount = 0;var patrn = /[^\x00-\xff]/; ...
你需掌握的CSS知识都在这了（长文建议收藏，文末有福利）
1.CSS盒模型,在不同浏览器的差异 css 标准盒子模型 css盒子模型又称为框模型(Box Model),包含了元素内容(content).内边距(padding).边框(border).外边距 ...
如何运行vue项目？(详解，建议收藏) ❤️
如何运行vue项目 (详解,建议收藏) 转载首先,列出来我们需要的东西: node.js环境(npm包管理器) vue-cli 脚手架构建工具 cnpm npm的淘宝镜像安装node.js 从no ...
❤️六万字《SpringMVC框架介绍—从入门到高级》（建议收藏）❤️
<SpringMVC框架介绍>(建议收藏) ❤️希望博友给个三连+关注!!! SSM: mybatis + Spring + SpringMVC MVC三层架构 SpringMVC + V ...
学习javascript这一篇就够了超详细笔记（建议收藏）上
学习javascript这一篇就够了超详细笔记(建议收藏)上 1.初识计算机基础导读编程语言计算机基础初识js 浏览器执行 js组成 js初体验-三种书写位置 js注释 js输入输出语句 2. ...
html类选择器使用在什么场景,你需掌握的CSS知识都在这了（长文建议收藏，文末有福利）...
1.CSS盒模型,在不同浏览器的差异 css 标准盒子模型 css盒子模型又称为框模型(Box Model),包含了元素内容(content).内边距(padding).边框(border).外边距 ...

用html+js实现聚光灯效果【建议收藏】

1、效果展示

2、代码分享

用html+js实现聚光灯效果【建议收藏】相关推荐

最新文章

热门文章