html5多颜色灯笼旋转,HTML5 Canvas 漂亮的斑马条纹灯笼

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var c = document.getElementById("c");

var ctx = c.getContext("2d");

var cw = c.width = window.innerWidth,

cx = cw / 2;

var ch = c.height = window.innerHeight,

cy = ch / 2;

var rad = (Math.PI / 180);

var Ry = [];

var a = 0;

var angulo = 20;

var R = 200;

var speed = .5;

var D = 2 * R,

d;

var y = cy + R;

var i = 0;

var num = 10;

var rx, ry, y;

var frames = 0;

var cornsilk = Grd(cx, cy, R, 35);

var fillstyle = "black";

function Draw() {

a += speed;

var last = 360 / angulo - 1;

updateRy(a, num);

ctx.clearRect(0, 0, cw, ch);

for (var l = 1; l < Ry.length; l++) {

for (var p = 1; p <= last; p++) {

ctx.fillStyle = Ry[l].points[p].color;

ctx.beginPath();

ctx.moveTo(Ry[l - 1].points[p - 1].xp, Ry[l - 1].points[p - 1].yp);

ctx.lineTo(Ry[l].points[p - 1].xp, Ry[l].points[p - 1].yp);

ctx.lineTo(Ry[l].points[p].xp, Ry[l].points[p].yp);

ctx.lineTo(Ry[l - 1].points[p].xp, Ry[l - 1].points[p].yp);

ctx.closePath();

ctx.fill();

}

ctx.fillStyle = Ry[l - 1].points[last].color;

ctx.beginPath();

ctx.moveTo(Ry[l - 1].points[last].xp, Ry[l - 1].points[last].yp);

ctx.lineTo(Ry[l].points[last].xp, Ry[l].points[last].yp);

ctx.lineTo(Ry[l].points[0].xp, Ry[l].points[0].yp);

ctx.lineTo(Ry[l - 1].points[0].xp, Ry[l - 1].points[0].yp);

ctx.closePath();

ctx.fill();

}

requestId = window.requestAnimationFrame(Draw);

}

requestId = window.requestAnimationFrame(Draw);

function buildRy(a, num) {

for (var l = -num; l <= num; l++) {

i++

var layer = {}

layer.rx = Math.sqrt(R * R - (R / num) * l * (R / num) * l);

layer.y = cy - l * (R * .9 / num);

layer.ry = layer.rx / 2;

layer.points = [];

for (var p = 0; p < 360; p += angulo) {

i++;

fillstyle = (i % 2 == 0) ? "black" : cornsilk;

var o = {}

o.color = fillstyle;

o.xp = cx + layer.rx * Math.cos((p + a) * rad);

o.yp = this.y + layer.ry * Math.sin((p + a) * rad);

layer.points.push(o);

}

Ry.push(layer);

}

}

function updateRy(a, num) {

for (var j = 0; j < Ry.length; j++) {

Ry[j].rx = Math.sqrt(R * R - (R / num) * (j - num) * (R / num) * (j - num));

Ry[j].y = cy - (j - num) * (R * .9 / num);

Ry[j].ry = Ry[j].rx / 2;

for (var p = 0; p < 360 / angulo; p++) {

Ry[j].points[p].xp = cx + Ry[j].rx * Math.cos((p * angulo + a) * rad);

Ry[j].points[p].yp = Ry[j].y + Ry[j].ry * Math.sin((p * angulo + a) * rad);

}

}

}

function Grd(x, y, r, hue) {

grd = ctx.createRadialGradient(x - R / 3, y - R / 3, 0, x, y, r);

grd.addColorStop(0, 'hsl(' + hue + ', 99%,93%)');

grd.addColorStop(1, 'hsl(' + hue + ', 99%,40%)');

return grd;

//console.log(grd)

}

buildRy(a, num);