【JavaScript】实现探照灯效果（附代码）

本文链接：https://blog.csdn.net/ccaoshangfei/article/details/125042222

话不多说，先看实现效果

Implemetation

探照灯：五角星+旋转+边界检测
背景：底色+阴影
图片：自适应大小+不透明度0.8+阴影
文字：阴影

UI Color matching

前层画布：#222222

后层画布：#eeeeee

文字：#3399ff

如果有小伙伴总是对配色产生烦恼，博主推荐三个优质配色网站

渐变色：Gradient Colors Collection Palette - CoolHue 2.0

配色：BrandColors - official brand color hex codes

配色：Color Palettes for Designers and Artists - Color Hunt

Engineering Structure

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Polygonal searchlight</title>
</head>
<body>

<!--设置一个高800，宽800大的画布-->
<canvas id="canvas" height="800" width="800"></canvas>

<script>
    var rot = 0;
    // 创建一个探照灯,开始时在（400,400）的位置，半径为150,x方向移动速度为vx，y方向移动速度为vy
    var searchLight = {
        x: 400,
        y: 400,
        radius: 230,
        vx: Math.random() * 5 + 10,
        vy: Math.random() * 5 + 10,
    }

    //界面开始加载
    window.onload = function () {
        //先加载画布
        var canvas = document.getElementById("canvas");
        //加载画布中的2d图像
        var ctx = canvas.getContext("2d");
        canvas.width = 800;
        canvas.height = 800;
        //设置刷新时间，每隔20毫秒刷新一次
        setInterval(function () {
            draw(ctx);
            update(canvas.width, canvas.height);
        }, 30);
    }

    //绘制底片的照片和文字
    function draw(context) {

        //对画布进行清空
        context.clearRect(0, 0,800, 800);
        context.save();
        context.beginPath();
        context.fillStyle = "black";
        context.fillRect(0, 0, context.canvas.width, context.canvas.height);

        //将画布背景换成灰色
        context.fillStyle = "#d6dde3";
        context.shadowColor='#878787';
        context.shadowOffsetX=5;
        context.shadowOffsetY=5;
        context.shadowBlur=2;


        context.save();
        context.translate(searchLight.x, searchLight.y);
        context.rotate(rot / 180 * Math.PI);
        context.scale(searchLight.radius,searchLight.radius);

        //绘制路径
        starPath(context);
        context.fill();
        //使用clip进行绘制区域的剪辑
        context.restore();
        context.clip();

        context.font = "bold 45px Arial";
        context.textAlign = " left";
        context.textBaseline = "middle";
        context.fillStyle = "#3fa9f5";
        context.fillText("CSDN", 450, 370);
        context.fillText("北村南", 450, 420);

        //实现图片自适应
        let image = new Image();
        image.src = 'Fengdi.jpg';
        //设置图片不透明度
        context.globalAlpha=0.8;
        context.drawImage(image, 200, 300, 200, 200);
        context.restore();
    }

    //update动画碰撞检测（*）
    function update(canvasWidth, canvasHeight) {
        rot += 1;
        searchLight.x += searchLight.vx;
        searchLight.y += searchLight.vy;
        if (searchLight.x - searchLight.radius <= 0) {
            searchLight.vx = -searchLight.vx;
            searchLight.x = searchLight.radius;
        }
        if (searchLight.x + searchLight.radius >= canvasWidth) {
            searchLight.vx = -searchLight.vx;
            searchLight.x = canvasWidth - searchLight.radius;
        }
        if (searchLight.y - searchLight.radius <= 0) {
            searchLight.vy = -searchLight.vy;
            searchLight.y = searchLight.radius;
        }
        if (searchLight.y + searchLight.radius >= canvasHeight) {
            searchLight.vy = -searchLight.vy;
            searchLight.y = canvasHeight - searchLight.radius;
        }
    }

    //绘制一个五角星（*）
    function starPath(ctx) {
        ctx.beginPath();
        for (var i = 0; i < 5; i++) {
            ctx.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI),
                -Math.sin((18 + i * 72) / 180 * Math.PI));
            ctx.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * 0.5,
                -Math.sin((54 + i * 72) / 180 * Math.PI) * 0.5);
        }
        ctx.closePath();
    }

</script>
</body>
</html>