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;

            rad.........完整代码请登录后点击上方下载按钮下载查看