gsap+sketchjs实现一个水墨风格墨水绘画效果代码-html代码-BFW代码库

gsap+sketchjs实现一个水墨风格墨水绘画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+sketchjs实现一个水墨风格墨水绘画效果代码

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

<html lang="en" >
<head>

    <meta charset="UTF-8">





    <style>
        html,body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }
        #container, #container canvas {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            display: block;
        }
    </style>



</head>

<body>
    <div id="container">
        
    </div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/sketch.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>



    <script>
        $(Main);

        function Main () {

            // ----------------------------------------
            // Particle
            // ----------------------------------------

            function Particle(x, y, radius) {
                this.init(x, y, radius);
            }

            Particle.prototype = {

                points: [],

                init: function(x, y, radius) {

                    this.alive = true;

                    this.radius = radius || 10;
                    this.wander = 0.15;
                    this.theta = random(TWO_PI);
                    this.drag = 0.92;
                    this.color = '#fff';

                    this.x = x || 0.0;
                    this.y = y || 0.0;

                    this.vx = 0.0;
                    this.vy = 0.0;

                },

                move: function() {
                    //this.points.push( {x: this.x, y: this.y } );

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

                    this.vx *= this.drag;
                    this.vy *= this.drag;

                    this.theta += random(-0.5, 0.5) * this.wander;
                    this.vx += sin(this.theta) * 0.1;
                    this.vy += cos(this.theta) * 0.1;

                    this.radius *= 0.96;
                    this.alive = this.radius > 0.1;
                },

                draw: function(ctx) {
                    ctx.beginPath()
                    ctx.arc(this.x, this.y, this.radius, 0, TWO_PI);
                    ctx.fillStyle = this.color;
                    ctx.strokeStyle = 'transparent'; //this.color;
                    ctx.fill();
                    ctx.stroke();
                }
            };

            // ----------------------------------------
            // Example
            // ----------------------------------------

            var MAX_PARTICLES = 2080;
            var COLORS = [
                'hsla(100,30%,60%,0.1)',
                'hsla(120,90%,80%,0.9)',
                'hsla(114,30%,60%,0.5)',
                'hsla(109,90%,40%,0.1)',
                'hsla(112,50%,60%,0.5)',
                'hsla(122,30%,20%,0.1)',
                'hsla(112,30%,10%,0.1)',
                'hsla(118,30%,100%,0.8)',
                'hsla(102,30%,100%,0.2)',
                'hsla(112,60%,60%,0.5)'
            ];
            var MODES = [
                'multiply',
                'lighten'
            ];

            var particles = [];
            var pool = [];

            var system = Sketch.create({
                autoclear: false,
                container: document.getElementById('container')
            });

            var _currentColor = random(COLORS);

            function changeColors () {
                _currentColor = random(COLORS);
                system.globalCompositeOperation = random(MODES);
                setTimeout(changeColors, 1000);
            }
            changeColors();

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