html5中多边形制作,HTML5/Canvas 几何多边形变换

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

Object.getOwnPropertyNames(Math).map(function(p) {

window[p] = Math[p];

});

if (!hypot) {

var hypot = function(x, y) {

return sqrt(pow(x, 2) + pow(y, 2));

};

}

var N_SHAPES_DIM = 8,

SHAPE_SIZE = 64,

GUTTER = 8,

shapes = [],

n_shapes,

r_max = (SHAPE_SIZE - GUTTER) / 2,

assembly_diag = (N_SHAPES_DIM - 1) * SHAPE_SIZE,

c = document.querySelector('canvas'),

w, h, g,

ctx = c.getContext('2d'),

t = 0,

r_id = null;

var Shape = function(o) {

this.o = o || {

'x': 0,

'y': 0

};

this.d = hypot(this.o.x, this.o.y);

this.φ = (this.d / (assembly_diag / 2)) * PI;

this.n = 3;

this.α = 2 * PI / this.n;

this.draw = function(ctxt) {

var r = r_max * (1 + sin(t * PI / 120 + this.φ)) / 2,

β, x, y;

if (r < 1 && t % 5 != 0) {

this.n++;

if (this.n > 8) this.n = 3;

this.α = 2 * PI / this.n;

}

ctxt.beginPath();

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

β = i * this.α + t * PI / 120 + PI / 2 + this.φ;

x = this.o.x + r * cos(β);

y = this.o.y + r * sin(β);

ctxt.arc(x, y, r_max - r,

β - this.α / 2, β + this.α / 2);

}

ctxt.closePath();

ctxt.fill();

//ctxt.stroke();

};

};

var init = function() {

var s = getComputedStyle(c),

n = 10,

k,

x, y;

w = c.width = s.width.split('px')[0];

h = c.height = s.height.split('px')[0];

if (r_id) {

cancelAnimationFrame(r_id);

r_id = null;

}

shapes = [];

ctx.translate(w / 2, h / 2);

ctx.strokeStyle = '#fff';

ctx.lineWidth = 4;

g = ctx.createLinearGradient(0, -h / 2, 0, h / 2);

for (var i = 0; i <= n; i++) {

k = i / n;

g.addColorStop(k, 'hsl(' + k * 360 + ',100%,75%)');

}

for (var i = 0; i < N_SHAPES_DIM; i++) {

y = (i - N_SHAPES_DIM / 2 + .5) * SHAPE_SIZE;

for (var j = 0; j < N_SHAPES_DIM; j++) {

x = (j - N_SHAPES_DIM / 2 + .5) * SHAPE_SIZE;

shapes.push(new Shape({

'x': x,

'y': y

}));

}

}

n_shapes = shapes.length;

draw();

};

var draw = function() {

ctx.clearRect(-w / 2, -h / 2, w, h);

ctx.globalAlpha = 1;

ctx.fillStyle = g;

ctx.rect(-w / 2, -h / 2, w, h);

ctx.fill();

ctx.fillStyle = '#000';

ctx.globalAlpha = .32;

for (var i = 0; i < n_shapes; i++) {

shapes[i].draw(ctx);

}

t++

r_id = requestAnimationFrame(draw);

};

setTimeout(function() {

init();

addEventListener('resize', init, false);

}, 15);