js实现鼠标跟随canvas水墨画绘画动画效果代码-html代码-BFW代码库

js实现鼠标跟随canvas水墨画绘画动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现鼠标跟随canvas水墨画绘画动画效果代码

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

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


    <style>

        html {
            overflow: hidden;
            touch-action: none;
            content-zooming: none;
        }
        body {
            position: absolute;
            margin: 0;
            padding: 0;
            background: #111;
            width: 100%;
            height: 100%;
        }
        #canvas {
            width: 100%;
            height: 100%;
            background: #fff;
            position: absolute;
        }
        #text {
            position: absolute;
            left: 0;
            bottom: 10px;
            width: 100%;
            pointer-events: none;
        }

        #text div {
            position: absolute;
            color: #888;
            left: 0;
            width: 100%;
            text-align: center;
            top: -32px;
            font-family: 'Poiret One', cursive;
            font-size: 32px;
        }
    </style>
</head>

<body>

    <canvas id="canvas"></canvas>

    <div id="text">
        <div id="clic" nowrap>
            this pen is mouse/touch interactive
        </div>
    </div>

    <script>
        ! function () {

            "use strict";

            // branch constructor

            function Branch (parent, level, x, y) {

                this.parent = parent;
                this.branches = [];
                this.p0 = parent ? parent.p1: new Point(x, y);
                this.p1 = new Point(x, y);
                this.level = level;
                this.life = 20;
                this.angle = 0;
                this.vx = 0;
                this.vy = 0;

            }

            // grow branch

            Branch.prototype.grow = function () {

                // recursively grow children branches

                for (var i = 0; i < this.branches.length; i++) {

                    this.branches[i].grow();

                }

                // grow branch

                if (this.life > 1) {

                    this.p1.x += this.vx;
                    this.p1.y += this.vy;

                    ctx.beginPath();
                    ctx.lineCap = "round";

                    if (this.level) {

                        // draw branch

                        ctx.lineWidth = this.level * 6 - 5;
                        ctx.strokeStyle = "#000";

                        if (this.parent) {

                            ctx.moveTo(this.parent.p0.x, this.parent.p0.y);
                            ctx.quadraticCurveTo(this.p0.x, this.p0.y, this.p1.x, this.p1.y);

                        }

                        ctx.stroke();

                    } else {

                        // draw leaf

                        ctx.lineWidth = 10;
                        ctx.strokeStyle = "#f40";
                        ctx.moveTo(this.p0.x, this.p0.y);
                        ctx.lineTo(this.p1.x, this.p1.y);
                        ctx.stroke();

                    }
                }

                // create sub branches

                if (this.life === 1 && this.level > 0 && this.level < maxLevels) {

                    this.branches.push(newBranch(this));
                    this.branches.push(newBranch(this));

                }

                // decrement branch life

                this.life--;

            }

            // point 2D constructor

            function Point (x, y) {

                this.x = x;
                this.y = y;

            }

            // new branch factory

            function newBranch (parent) {

                var branch = new Branch (parent, parent.level - 1, parent.p1.x, parent.p1.y);

                branch.angle = (autorun && parent.level === maxLevels) ? Math.random() * 2 * Math.PI: Math.atan2(
                    parent.p1.y - parent.p0.y,
                    parent.p1.x - parent.p0.x
                ) + (Math.random() * 1.4 - 0.7);

                branch.vx = Math.cos(branch.angle) * 12;
                branch.vy = Math.sin(branch.angle) * 12;

                branch.life = branch.level === 1 ? .........完整代码请登录后点击上方下载按钮下载查看