序言
今天给大家分享的是一个根据Canvas动态化手电。这一手电能通过鼠标的挪动来模拟手电焦距，实现一个真实手电感受。编码非常简单，让我们一起来看看如何做到。
最先一起来看看这一手电的页面代码。大家可以看到这一网页页面主要是由一个canvas原素组成，canvas是HTML5所提供的用以制图标签。
<!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>
<body>
<canvas></canvas>
</body>
</html>
下面我们来看一下HTML里的style一部分。最先对里外边距开展款式重设而且大家增设了全部body元素款式，使之布满一整个显示屏。
* {
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;
}
在其中，background特性特定了界面的背景图案，并增设了图片的尺寸位置和方向。
下面我们来说canvas元素款式：
canvas {
position: fixed;
left: 0;
top: 0;
z-index: 999;
pointer-events: none;
}
这儿我们将要canvas的区域设置为精准定位（position: fixed），并把它放置显示屏最上边（z-index: 999）。pointer-events属性设为none，这就意味着大家可以忽略不计canvas元素鼠标事件，让鼠标事件透过并传达到下边元素上。
接着是JavaScript代码的那一部分。
我们先获得了canvas原素和它前后文（context）。随后申明了一个position目标，用以纪录鼠标位置及其焦距的半经。
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const position = {
x: 0,
y: 0,
r: 50
}
接着是两个关键点的函数公式：init和render。在init函数中，大家复位了canvas原素并绘制了原始的灰色背景。但在render函数中，我们可以通过鼠标的部位来动态性3D渲染焦距大小，并且在canvas上创建一个放射性渐变效果，来模拟真实手电灯源。
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);
}
在其中，createRadialGradient函数能够创建一个放射性渐变效果，其主要参数分别为灯源位置和尺寸。
最终，我们可以通过给document对象添加鼠标事件监控器来达到鼠标位置的自动更新。当鼠标移动时，大家就能够动态性地3D渲染焦距大小和那个位置。
document.onmousemove = e => {
position.x = e.clientX;
position.y = e.clientY;
render();
}
window.onload=function() {
init()
}
如今，己经能够电脑鼠标在页面中移动来模拟手电筒的光线了！
结束语
之上便能通过简洁明了通俗易懂的编码来达到一个有意思的实际效果动漫，
本站是一个以CSS、JavaScript、Vue、HTML为中心的前端开发技术网址。我们的使命是为众多前端工程师者提供全方位、全方位、好用的前端工程师专业知识和技术服务。 在网站上，大家可以学到最新前端开发技术，掌握前端工程师最新发布的趋势和良好实践。大家提供大量实例教程和实例，让大家可以快速上手前端工程师的关键技术和程序。 本站还提供了一系列好用的工具软件，帮助你更高效地开展前端工程师工作中。公司提供的一种手段和软件都要经过精心策划和改进，能够帮助你节约时间精力，提高研发效率。 此外，本站还拥有一个有活力的小区，你可以在社区里与其它前端工程师者沟通交流技术性、交流经验、处理问题。我们坚信，街道的能量能够帮助你能够更好地进步与成长。 在网站上，大家可以寻找你需要的一切前端工程师网络资源，使您成为一名更加出色的网页开发者。欢迎你添加我们的大家庭，一起探索前端工程师的无限潜能!