CANVAS中可控的绘图动效

用按钮来控制CANVAS中绘图程序的运行和暂停

CANVAS

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1358
作品推荐
使用帮助
常用链接

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");
    }
}

// using mixins.debug
// using showOnReady

var _Math = Math;
var floor = _Math.floor;
var random = _Math.random;

var application = Object.assign({}, mixins.debug, {
    debug: false,
    canvas: null,
    context: null,
    layout: null,
    nodes: null,
    boot: function boot() {
        var _this = this;

this.canvas = document.getElementById('canvas');
        this.context = canvas.getContext('2d');
        this.nodes = [];
        this.setup();

this.playback = document.getElementById('playback');
        this.playback.addEventListener('click', function() {
            var state = _this.playback.getAttribute('data-state');
            if (state == 'stopped') {
                _this.play();
            } else if (state == 'playing') {
                _this.stop();
            }
        });
        if (!this.debug) {
            this.play();
        }
    },
    draw: function draw() {
        for (var i = 0, l = this.nodes.length; i < l; i += 1) {
            this.nodes[i].draw();
        }
    },
    play: function play() {
        var _this2 = this;

var frame;
        var step = function step() {
            _this2.draw();
            frame();
        };
        if (window.requestAnimationFrame) {
            frame = function frame() {
                _this2._frame = requestAnimationFrame(step);
            };
        } else {
            (function() {
                var mspf = 1000 / 60;
                frame = function frame() {
                    _this2._timeout = setTimeout(step, mspf);
                };
            })();
        }
        frame();
        this.playback.setAttribute('data-state', 'playing');
    },
    setup: function setup() {
        var _this3 = this;

for (var i2 = 0, l2 = _this3.layout.varyingRowSize(i1); i2 < l2; i2 += 1) {
                _loop2(i2, l2);
            }
        };

for (var i1 = 0, l1 = this.layout.rowCount; i1 < l1; i1 += 1) {
            _loop(i1, l1);
        }
        this.log('nodes', this.nodes.length);
    },
    stop: function stop() {
        if (window.cancelAnimationFrame) {
            cancelAnimationFrame(this._frame);
        } else {
            clearTimeout(this._timeout);
        }
        this.playback.setAttribute('data-state', 'stopped');
    }
});

var NodeLayout = function() {
    function NodeLayout(delegate) {
        _classCallCheck(this, NodeLayout);

this.delegate = delegate;
    }

NodeLayout.prototype.nodePosition = function nodePosition(iRow, iColumn) {
        var origin = this.origin;
        var nodeOuterSize = this.nodeOuterSize;

return {
            x: origin.x + iColumn * nodeOuterSize.width,
            y: origin.y + iRow * nodeOuterSize.height
        };
    };

NodeLayout.prototype.varyingRowSize = function varyingRowSize(index) {
        return floor(this.rowSizeVariance[index] * this.rowSize);
    };

_createClass(NodeLayout, [{
        key: 'innerSize',
        get: function get() {
            var paddingSize = this.paddingSize;
            var size = this.size;

return {
                height: size.height - 2 * paddingSize.height,
                width: size.width - 2 * paddingSize.width
            };
        }
    }, {
        key: 'nodeMarginSize',
        get: function get() {
            return this.delegate.nodeMarginSize();
        }
    }, {
        key: 'nodeOuterSize',
        get: function get() {
            var nodeMarginSize = this.nodeMarginSize;
            var nodeSize = this.nodeSize;

return {
                height: nodeSize.height + 2 * nodeMarginSize.height,
                width: nodeSize.width + 2 * nodeMarginSize.width
            };
        }
    }, {
        key: 'nodeSize',
        get: function get() {
            return this.delegate.nodeSize();
        }
    }, {
        key: 'origin',
        get: function get() {
            var paddingSize = this.paddingSize;

return {
                x: paddingSize.width,
                y: paddingSize.height
            };
        }
    }, {
        key: 'paddingSize',
        get: function get() {
            return this.delegate.paddingSize();
        }
    }, {
        key: 'rowCount',
        get: function get() {
            return floor(this.innerSize.height / this.nodeOuterSize.height);
        }
    }, {
        key: 'rowSize',
        get: function get() {
            return floor(this.innerSize.width / this.nodeOuterSize.width);
        }
    }, {
        key: 'rowSizeVariance',
        get: function get() {
            if (!this._rowSizeVariance) {
                this._rowSizeVariance = [];
                for (var i = 0, l = this.rowCount; i < l; i += 1) {
                    this._rowSizeVariance[i] = (random() + 1) / 2;
                }
            }
            return this._rowSizeVariance;
        }
    }, {
        key: 'size',
        get: function get() {
            return this.delegate.size();
        }
    }]);

return NodeLayout;
}();

var Node = function() {
    function Node(id, delegate) {
        _classCallCheck(this, Node);

this.delegate = delegate;
        this.draw();
    }

Node.prototype.draw = function draw() {
        var color = this.color;
        var context = this.context;
        var position = this.position;
        var size = this.size;

context.fillStyle = color;
        context.fillRect(position.x, position.y, size.width, size.height);
    };

_createClass(Node, [{
        key: 'color',
        get: function get() {
            var baseValue = 150;
            var value = parseInt(baseValue * (random() + 1) / 2);
            return 'rgba(' + value + ', ' + value + ', ' + value + ', 1)';
        }
    }, {
        key: 'context',
        get: function get() {
            return this.delegate.context();
        }
    }, {
        key: 'position',
        get: function get() {
            return this.delegate.position();
        }
    }, {
        key: 'size',
        get: function get() {
            return this.delegate.size();
        }
    }]);

return Node;
}();

showOnReady(function() {
    application.boot();
});

编译

CSS

HTML

用按钮来控制CANVAS中绘图程序的运行和暂停

CANVAS

编辑器支持Emmet

快捷键

用按钮来控制CANVAS中绘图程序的运行和暂停

CANVAS

CANVAS 随机运动的贴图效果

CANVAS 刮掉表面显示下层图案的动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：