Loadash.js+bean.js 大小不规则的围棋方格子

B&W rectangles | Canvas animation

canvas，格子

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2324
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError('Cannot call a class as a function');
    }
}

var Scene = (function() {
    function Scene(config, params) {
        _classCallCheck(this, Scene);

this.config = config;
        this.params = params;
        this.linesX = [];
        this.linesY = [];
    }

_createClass(Scene, [{
        key: 'reset',
        value: function reset() {
            this.linesX = [];
            this.linesY = [];
        }
    }, {
        key: 'distribute2',
        value: function distribute2(minDist, maxDist, bound) {
            var lines = [0];
            var dist = 0;

while (true) {
                dist += minDist;
                lines.push(dist);

if (dist > bound) {
                    break;
                }
            }

return lines;
        }
    }, {
        key: 'distribute',
        value: function distribute(minDist, maxDist, bound, center) {
            if (center === 0) {
                center = 1;
            }

var lines = [0];

return lines;
        }
    }, {
        key: 'distribute3',
        value: function distribute3(minDist, maxDist, bound, center) {

if (center === 0) {
                center = 1;
            }
            var lines = [0];
            var dist = 0;
            while (true) {

var p = undefined;
                if (dist <= center) {
                    p = dist / center;
                } else {
                    // dist > center
                    p = (bound - dist) / (bound - center);
                }

var diff = p * (maxDist - minDist) + minDist;

dist += diff;

lines.push(dist);

if (dist > bound) {
                    break;
                }
            }

return lines;
        }
    }, {
        key: 'calculate',
        value: function calculate() {
            this.reset();

this.linesX = this.distribute3(this.params.minDist, this.params.maxDist, this.params.canvasWidth, this.config.centerX);

this.linesY = this.distribute3(this.params.minDist, this.params.maxDist, this.params.canvasHeight, this.config.centerY);
        }
    }, {
        key: 'draw',
        value: function draw(ctx) {
            for (var i = 0, l = this.linesX.length; i < l - 1; i += 2) {
                ctx.fillRect(this.linesX[i], 0, this.linesX[i + 1] - this.linesX[i], this.params.canvasHeight);
            }
            for (var i = 0, l = this.linesY.length; i < l - 1; i += 2) {
                ctx.fillRect(0, this.linesY[i], this.params.canvasWidth, this.linesY[i + 1] - this.linesY[i]);
            }
        }
    }]);

return Scene;
})();

var Tweener = (function() {
    var _class = function Tweener() {
        _classCallCheck(this, _class);

this.prevTime = 0;
        this.diff = 0;
        this.tweens = [];
        this.state = 1;
    };

_createClass(_class, [{
        key: 'tick',
        value: function tick() {
            var _this = this;

var now = new Date();
            var nowMS = now.getTime();

if (this.prevTime !== 0) {
                this.diff = nowMS - this.prevTime;
            }
            this.prevTime = nowMS;

if (!this.state) {
                return;
            }
            this.tweens.forEach(function(tween) {
                var v;
                var pos_diff = _this.diff / tween.params.dur;

var pos = tween.params.pos + pos_diff * tween.params.dir;

var dir = tween.params.dir;
                if (pos > 1) {
                    pos = 1 - (pos - 1);
                    dir = -1;
                }
                if (pos < 0) {
                    pos = -pos;
                    dir = 1;
                }

v = pos * (tween.params.max - tween.params.min) + tween.params.min;
                tween.cb(v);
                tween.params.dir = dir;
                tween.params.pos = pos;
            });
        }
    }, {
        key: 'tween',

/**
         * register tween
         * @param params
         * @param cb function(value)
         */
        value: function tween(params, cb) {
            params.dir = 1;
            this.tweens.push({
                params: params,
                cb: cb
            });
        }
    }, {
        key: 'start',
        value: function start() {
            this.state = 1;
        }
    }, {
        key: 'stop',
        value: function stop() {
            this.state = 0;
        }
    }]);

return _class;
})();

var startStats = function startStats() {

var stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.right = '0px';
    stats.domElement.style.top = '0px';
    document.body.appendChild(stats.domElement);
    return stats;
};

(function mainBootstrap() {
    var params = {
        canvasWidth: 400,
        canvasHeight: 400,
        minDist: 8,
        maxDist: 50
    };

var config = {
        centerX: 200,
        centerY: 200
    };

var init = function init() {
        var stats = startStats();

var $canvas = document.querySelector('canvas.main');

var scene = new Scene(config, params);
        var tweener = new Tweener();

var startTweener = _.debounce(function() {
            tweener.start();
        }, 2000);

bean.on($canvas, 'mousemove', function(ev) {
            config.centerX = ev.offsetX;
            config.centerY = ev.offsetY;
            tweener.stop();
            startTweener();
        });

var ctx = $canvas.getContext('2d');

//ctx.globalCompositeOperation = 'multiply';
        ctx.globalCompositeOperation = 'xor';

ctx.fillStyle = 'black';

tweener.tween({
            dur: 5000,
            min: 50,
            max: params.canvasWidth - 50,
            pos: 0
        }, function(v) {
            config.centerX = v;
        });
        tweener.tween({
            dur: 5000,
            min: 20,
            max: params.canvasWidth - 50,
            pos: 0.5
        }, function(v) {
            config.centerY = v;
        });

ctx.clearRect(0, 0, params.canvasWidth, params.canvasHeight);
        scene.calculate();
        scene.draw(ctx);

var loop = function loop() {
            //console.time('a');

ctx.clearRect(0, 0, params.canvasWidth, params.canvasHeight);

scene.calculate();
            scene.draw(ctx);

stats.update();
            tweener.tick();

requestAnimationFrame(loop);
            //console.timeEnd('a');
        };

loop();
    };

domready(init);
})();

编译

CSS

HTML

B&W rectangles | Canvas animation

canvas，格子

编辑器支持Emmet

快捷键

B&W rectangles | Canvas animation

canvas，格子

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：