JavaScript---动态爱心代码

瓶中蛇

已于 2022-11-17 10:36:00 修改

阅读量5k

点赞数 13

分类专栏：笔记文章标签： javascript 前端开发语言

于 2022-11-16 11:36:55 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_63597494/article/details/127881993

版权

效果展示：

源码如下：

可更改背景图、背景色以及爱心颜色。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态爱心代码</title>
    <style>
        html,
        body {
            height: 100%;
            padding: 0;
            margin: 0;
            /* 背景颜色 */
            background: #000;
            /* 此处可调节背景颜色及背景图 */
            background-image: url(bg.gif);
            /* 背景图片垂直、水平均居中 */
            background-position: center center;
            /* 背景图片不平铺 */
            background-repeat: no-repeat;
            /* 当内容高度>图片高度时，背景图像的位置相对于电脑窗口固定 */
            background-attachment: fixed;
            /* 让背景图片基于窗口大小伸缩 */
            background-size: cover;


        }

        canvas {
            position: absolute;
            /* 此处可更改爱心位置 */
            width: 100%;
            height: 100%;
            /* width: 500px;
            height: 500px; */

        }
    </style>
</head>

<body>
    <canvas id="pinkboard"></canvas>
    <script>
        //  设置粒子
        var settings = {
            particles: {
                length: 500, // 最大颗粒量
                duration: 2, // 粒子持续时间（秒）
                velocity: 100, // 粒子速度（以像素/秒为单位）
                effect: -0.65, // 影响粒子的扩散
                size: 30, // 粒径（像素）
            },
        };

        (function () { var b = 0; var c = ["ms", "moz", "webkit", "o"]; for (var a = 0; a < c.length && !window.requestAnimationFrame; ++a) { window.requestAnimationFrame = window[c[a] + "RequestAnimationFrame"]; window.cancelAnimationFrame = window[c[a] + "CancelAnimationFrame"] || window[c[a] + "CancelRequestAnimationFrame"] } if (