html在线绘图拼图,HTML5 随机拼图

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

'use strict';

var _createClass = (function() {

function defineProperties(target, props) {

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

var descriptor = props[i];

descriptor.enumerable = descriptor.enumerable || false;

descriptor.configurable = true;

if ('value' in descriptor) descriptor.writable = true;

Object.defineProperty(target, descriptor.key, descriptor);

}

}

return function(Constructor, protoProps, staticProps) {

if (protoProps) defineProperties(Constructor.prototype, protoProps);

if (staticProps) defineProperties(Constructor, staticProps);

return Constructor;

};

})();

function _slicedToArray(arr, i) {

if (Array.isArray(arr)) {

return arr;

} else if (Symbol.iterator in Object(arr)) {

var _arr = [];

var _n = true;

var _d = false;

var _e = undefined;

try {

for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {

_arr.push(_s.value);

if (i && _arr.length === i) break;

}

} catch (err) {

_d = true;

_e = err;

} finally {

try {

if (!_n && _i['return']) _i['return']();

} finally {

if (_d) throw _e;

}

}

return _arr;

} else {

throw new TypeError('Invalid attempt to destructure non-iterable instance');

}

}

function _classCallCheck(instance, Constructor) {

if (!(instance instanceof Constructor)) {

throw new TypeError('Cannot call a class as a function');

}

}

var cvs = document.createElement('canvas');

var ctx = cvs.getContext('2d');

var timeOut = null;

var tiles = null;

var globalHue = null;

var frame = null;

function resize(w, h) {

this.width = w;

this.height = h;

}

function clear() {

this.clearRect(this.canvas.width, this.canvas.height);

}

function getRandomHue() {

return Math.floor(Math.random() * 360);

}

function getColor(h, s, l) {

return 'hsl(' + h + ', ' + s + '%, ' + l + '%)';

}

var Tile = (function() {

function Tile(x, y, w, h, hue) {

_classCallCheck(this, Tile);

this.x = x;

this.y = y;

this.w = w;

this.h = h;

this.hue = hue;

}

_createClass(Tile, [{

key: 'divideX',

value: function divideX() {

var divider = Math.random();

var w = this.w * divider;

return [new Tile(this.x, this.y, w, this.h, this.hue), new Tile(this.x + w, this.y, this.w - w, this.h, this.hue)];

}

}, {

key: 'divideY',

value: function divideY() {

var divider = Math.random();

var h = this.h * divider;

return [new Tile(this.x, this.y, this.w, h, this.hue), new Tile(this.x, this.y + h, this.w, this.h - h, this.hue)];

}

}, {

key: 'updateHue',

value: function updateHue() {

var angle = Math.atan2(this.x - 0.5, this.y - 0.5);

this.hue += Math.sin(angle) * Math.cos(angle) * 10;

}

}]);

return Tile;

})();

;

//

function divideX(tiles) {

var newTiles = [];

tiles.forEach(function(tile, i) {

if (tile.w > 0.01) {

newTiles = newTiles.concat(tile.divideX());

} else {}

});

return newTiles;

}

function divideY(tiles) {

var newTiles = [];

tiles.forEach(function(tile, i) {

if (tile.h > 0.01) {

newTiles = newTiles.concat(tile.divideY());

} else {}

});

return newTiles;

}

function drawTiles(tiles) {

var _this = this;

var w = this.canvas.width;

var h = this.canvas.height;

tiles.forEach(function(tile) {

var x = tile.x * w;

var y = tile.y * h;

var width = tile.w * w;

var height = tile.h * h;

var _map = [x, y, width, height].map(Math.ceil);

var _map2 = _slicedToArray(_map, 4);

x = _map2[0];

y = _map2[1];

width = _map2[2];

height = _map2[3];

tile.updateHue();

_this.fillStyle = getColor(globalHue + tile.hue, 100, 50);

_this.fillRect(x, y, width, height);

});

}

function divide() {

tiles = divideX(tiles);

tiles = divideY(tiles);

timeOut = setTimeout(divide, 200);

}

function draw() {

drawTiles.call(ctx, tiles);

frame = requestAnimationFrame(draw);

//document.body.style.background = `url(${cvs.toDataURL()})`

}

function run() {

draw();

divide();

}

function reset() {

globalHue = getRandomHue();

tiles = [new Tile(0, 0, 1, 1, 0)];

cancelAnimationFrame(frame);

clearTimeout(timeOut);

run();

}

cvs.onclick = reset;

/*window.onresize = function () {

resize.call(cvs, window.innerWidth, window.innerHeight);

reset();

}

window.onresize();*/

resize.call(cvs, 300, 300);

reset();

document.body.appendChild(cvs);

//newTiles.push(tile);

//newTiles.push(tile);