【转载】用Canvas实现一个动态手电筒，让你体验真实光圈效果！
原文
用Canvas实现一个动态手电筒，让你体验真实光圈效果！ - 掘金
续借上文
效果图
讲解
请参考掘金文章【原文】
用Canvas实现一个动态手电筒，让你体验真实光圈效果！ - 掘金
如果比较吃力，可以参考我的上篇文章：
全部代码
因为原文没有粘贴全部代码，而是相对零碎的，而且没有效果图。
所以我才发出该篇文章。
<!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>
