canvas雪花形状调整动画-html代码-BFW代码库

canvas雪花形状调整动画

代码语言：html

所属分类：动画

代码描述：canvas雪花形状调整动画

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        body {
            background-color: #6aF;
            background-image: linear-gradient(90deg, #048 0%, #6AF 100%);
            display: grid;
            place-content: center;
            height: 100vh;
        }
        canvas {
            width: 100vmin;
        }
    </style>

</head>
<body translate="no">
    <canvas id="c"></canvas>

 <script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
        <script>
            var canvas = document.getElementById('c');
            canvas.width = canvas.height = 500;

            var ctx = canvas.getContext("2d");
            ctx.strokeStyle = '#fff';
            ctx.lineCap = 'round';

            var p = {
                a: 1.36,
                b: 1.36,
                c: 2.72
            };

            var fork = function (x, y, d, a) {
                if (d >= 1) {

                    if (a) {
                        ctx.translate(x, y);
                        ctx.rotate(a);
                        ctx.translate(-x, -y);
                    }

                    ctx.beginPath();
                    ctx.moveTo(x, y);
                    ctx.lineTo(x, y-(p.c*d));
                    ctx.moveTo(x, y-d);
                    ctx.lineTo(x-(d/p.a), y-(p.b*d));
                    ctx.........完整代码请登录后点击上方下载按钮下载查看