效果图
效果图
讲解
利用 canvas 技术画圆圈。
JS 鼠标操作。
如果不会请移步我的 CSDN 文章：
如果不想跳转其他网址，请移步我的另一篇头条文章（内容一样）：
全部代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态手电筒</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: url(https://pic2.zhimg.com/v2-4d0f3e43e75bb67646215e259fc2e9ad_r.jpg) no-repeat;
background-size: cover;
background-position: center;
}
canvas {
position: fixed;
left: 0;
top: 0;
z-index: 999;
pointer-events: none;
}
</style>
</head>
<body>
<canvas></canvas>
<script>
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const position = {
x: 0,
y: 0,
r: 50
}
function render() {
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
ctx.beginPath();
ctx.clearRect(0, 0, canvas.width, canvas.height)
var radial = ctx.createRadialGradient(position.x, position.y, position.r, position.x, position.y, position.r * 3)
radial.addColorStop(0, 'rgba(255,255,255,0)');
radial.addColorStop(1, 'rgba(0,0,0,0.9)');
ctx.fillStyle = radial;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function init() {
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
ctx.beginPath();
ctx.clearRect(0, 0, canvas.width, canvas.height)
var radial = ctx.createRadialGradient(position.x, position.y, position.r, position.x, position.y, position.r * 3)
radial.addColorStop(1, 'rgba(0,0,0,0.9)');
ctx.fillStyle = radial;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
document.onmousemove = e => {
position.x = e.clientX;
position.y = e.clientY;
render();
}
window.onload = function () {
init()
}
</script>
</body>
</html>