HTML5 Canvas透明凌镜背景特效-html代码-BFW代码库

HTML5 Canvas透明凌镜背景特效

代码语言：html

所属分类：背景

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Prisms are often triangular</title>


    <style>
        body {
            padding: 0;
            margin: 0;
            overflow: hidden;
        }

        div {
            width: 100vw;
            height: 100vh;
            background-image: url(http://repo.bfw.wiki/bfwrepo/img/photo.jpg);
            background-size: cover;
            background-position: center center;
        }

        canvas {
            width: 100vw;
            height: 100vh;
            mix-blend-mode: overlay;
        }

    </style>

    <script src="http://repo.bfw.wiki/bfwrepo/js/prefixfree.min.js"></script>

</head>
<body>

    <div>
        <canvas id="c"></canvas>
    </div>

    <script>

        let dimensions = [document.documentElement.clientWidth, document.documentElement.clientHeight];

        let mouseX;
        let mouseY;

        let radius;
        const d2r = 0.0174533;

        let cx;
        let cy;

        let prism;

        let canvas;
        let ctx;

        let el = [];

        let poly;
        let poly2;

        const init = () => {

            dimensions = [document.documentElement.clientWidth, document.documentElement.clientHeight];

            mouseX = dimensions[0] / 2;
            mouseY = dimensions[1] / 2;

            radius = 50;
            // const d2r = 0.0174533;

            cx = Math.sin(60 * 0.0174533) * radius;
            cy = radius * 1.5;

            prism = Math.ceil(dimensions[0] / cx);

            canvas = document.getElementById('c');
            canvas.width = dimensions[0];
            canvas.height = dimensions[1];
            ctx = canvas.getContext('2d');

            el = [];
            for (let x = 0; x < prism * prism; x++) {
                el.push([Math.random(), 0.5]);
            }

            poly = [
                Math.sin(0 * d2r) * radius, Math.cos(0 * d2r) * radius,
                Math.sin(120 * d2r) * radius, Math.cos(120 * d2r) * radius,
                Math.sin(240 * d2r) * radius, Math.co.........完整代码请登录后点击上方下载按钮下载查看