js实现粒子烟雾绘制人物图像动画效果代码

代码语言:html

所属分类:粒子

代码描述:js实现粒子烟雾绘制人物图像动画效果代码

代码标签: 烟雾 绘制 人物 图像 动画 效果

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

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

<head>

    <meta charset="UTF-8">



    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background: black;
        }
        canvas {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 522px;
            height: 353px;
            transform: translate(-50%, -50%);
            border: 1px solid black;
        }

        footer {
            font-family: monospace;
            width: 100%;
            color: white;
            font-size: 15px;
            margin-left: 5px;
            text-shadow: 1px 1px 1px #737373;
            position: absolute;
            bottom: 0;
            width: 95%;
            text-align: center;
            padding-bottom: 15px;
        }
        footer a {
            color: orangered;
        }
    </style>




</head>

<body>
    <canvas id="canvas1"></canvas>



    <script>
        const image = new Image();
        image.src = 'data:image/jpeg;base64,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.........完整代码请登录后点击上方下载按钮下载查看

网友评论0