用 Canvas 画简易手电筒

本文章适合人群:

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

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

实验结果

一个跟随着鼠标移动的圆圈。
用 Canvas 画简易手电筒_第1张图片

教学

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

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

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

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); 

现在,当滑块值改变或鼠标/触摸事件发生时,光圈会在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>

你可能感兴趣的:(笔记,javascript,canvas)