用 Canvas 画简易手电筒

本文章适合人群:

具备 html、js 基础的人
对于想入门 canvas 的人

本文章较为简单，大佬可略过

实验结果

一个跟随着鼠标移动的圆圈。
在这里插入图片描述

教学

要实现一个动态手电筒效果，我们可以使用Canvas来绘制一个黑色的遮罩层，并通过鼠标或触摸事件来控制光圈的位置和大小。首先，我们需要在HTML中创建一个Canvas元素和一个用于控制光圈的滑块。

<canvas id="flashlightCanvas">canvas>
<input type="range" id="lightSize" min="50" max="200" value="100"> 
1
2

接下来，在JavaScript中获取Canvas元素和滑块的引用，并设置Canvas的宽度和高度。

const canvas = document.getElementById("flashlightCanvas"); 
const ctx = canvas.getContext("2d"); 
canvas.width = window.innerWidth; 
canvas.height = window.innerHeight; 
1
2
3
4

然后，我们需要创建一个函数来绘制遮罩层和光圈。该函数会在滑块值改变和鼠标/触摸事件发生时被调用。

function drawFlashlight() { 
  // 清除画布 
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 绘制黑色遮罩层 
  ctx.fillStyle = "rgba(0, 0, 0, 0.7)";
  ctx.fillRect(0, 0, canvas.width, canvas.height); 
  // 获取光圈位置和大小 
  const lightSize = document.getElementById("lightSize").value; 
  const mouseX = event.clientX; const mouseY = event.clientY; 
  // 绘制光圈 
  ctx.globalCompositeOperation = "destination-out"; 
  ctx.beginPath(); 
  ctx.arc(mouseX, mouseY, lightSize, 0, Math.PI * 2); 
  ctx.fill(); 
  ctx.globalCompositeOperation = "source-over";
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

最后，我们需要为滑块和鼠标/触摸事件添加事件监听器，并在事件发生时调用绘制函数。

document.getElementById("lightSize").addEventListener("input", drawFlashlight); 
canvas.addEventListener("mousemove", drawFlashlight); canvas.addEventListener("touchmove", drawFlashlight); 
1
2

现在，当滑块值改变或鼠标/触摸事件发生时，光圈会在Canvas上绘制出来，实现动态手电筒效果。

完整代码

DOCTYPE html>
<html>

<head>
    <title>Dynamic Flashlighttitle>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    style>
head>

<body>
    <canvas id="flashlightCanvas">canvas>
    <input type="range" id="lightSize" min="50" max="200" value="100">
    <script>
        const canvas = document.getElementById("flashlightCanvas");
        const ctx = canvas.getContext("2d");
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        function drawFlashlight() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = "rgba(0, 0, 0, 0.7)";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            const lightSize = document.getElementById("lightSize").value;
            const mouseX = event.clientX; const mouseY = event.clientY;
            ctx.globalCompositeOperation = "destination-out"; ctx.beginPath();
            ctx.arc(mouseX, mouseY, lightSize, 0, Math.PI * 2); ctx.fill();
            ctx.globalCompositeOperation = "source-over";
        }
        document.getElementById("lightSize").addEventListener("input", drawFlashlight);
        canvas.addEventListener("mousemove", drawFlashlight);
        canvas.addEventListener("touchmove", drawFlashlight); 
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

相关阅读:
JAVA计算机毕业设计颜如玉图书销售网站的设计与实现Mybatis+系统+数据库+调试部署
LabVIEW应用开发——控件的使用（三）
Swift 另辟蹊径极速生成图片的缩略图
[python]python监听、操作键盘鼠标库pynput详细教程
一次SpringBoot版本升级，引发的血案
java 运算符
CSS 【详解】响应式布局（含 rem 详解）
用于一般光学系统的光栅元件
智能家居系统 QT
2022-09-16 Android app 让图片在ScrollView里面等比例完整显示不变形，继承ImageView ，对ImageView 进行修改。

原文地址：https://blog.csdn.net/qq_56402474/article/details/132888463