python画旋转六边形_Canvas 彩虹六边形旋转

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

(function() {

var lastTime = 0;

var vendors = ['ms', 'moz', 'webkit', 'o'];

for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {

window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];

window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];

}

if (!window.requestAnimationFrame)

window.requestAnimationFrame = function(callback, element) {

var currTime = new Date().getTime();

var timeToCall = Math.max(0, 16 - (currTime - lastTime));

var id = window.setTimeout(function() {

callback(currTime + timeToCall);

},

timeToCall);

lastTime = currTime + timeToCall;

return id;

};

if (!window.cancelAnimationFrame)

window.cancelAnimationFrame = function(id) {

clearTimeout(id);

};

}());

// ends requestAnimationFrame polyfill

var rad = (Math.PI / 180);

var R = 50;

var H = Math.sqrt(3) * R;

var W = 2 * R;

var S = 3 / 2 * R;

var a = 0;

var A = 60;

var n = 60;

var h = 0;

var speed = 6;

var stopped = true;

var level = 0;

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

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

var cw = c.width = 500,

cX = cw / 2;

var ch = c.height = 500,

cY = ch / 2;

/*function marker(x,y){

ctx.beginPath();

ctx.arc(x,y,3,0,2*Math.PI);

ctx.stroke();

}

*/

function drawHex(X, Y, a) {

ctx.fillStyle = "hsl(" + a + ",100%,50%)";

ctx.beginPath();

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

var x = X + ~~(R * .8) * Math.cos(rad * (i * 60 + a));

var y = Y + ~~(R * .8) * Math.sin(rad * (i * 60 + a));

ctx.lineTo(x, y);

}

ctx.closePath();

ctx.fill();

//marker(X,Y)

}

function buildRy(A) {

var hexRy = [];

// 0.

hexRy[0] = {

x: cX,

y: cY,

a: A,

level: 0

}

// 1

for (i = 30; i < 360; i += 60) {

A = (A < 300) ? A += n : 0;

var x = cX + H * Math.cos(i * rad);

var y = cY + H * Math.sin(i * rad);

hexRy[hexRy.length] = {

x: x,

y: y,

a: A,

level: 1

}

}

// 2

var pRy2 = [];

for (i = 30; i < 360; i += 60) {

var c = pRy2.length;

pRy2[c] = {}

pRy2[c].x = cX + 2 * H * Math.cos(i * rad);

pRy2[c].y = cY + 2 * H * Math.sin(i * rad);

}

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

var k = (i - 1 >= 0) ? i - 1 : pRy2.length - 1

A = (A < 300) ? A += n : 0;

var c = hexRy.length;

hexRy[c] = {

x: pRy2[k].x,

y: pRy2[k].y,

a: A,

level: 2

}

A = (A < 300) ? A += n : 0;

var x = (pRy2[k].x - pRy2[i].x) / 2 + pRy2[i].x;

var y = (pRy2[k].y - pRy2[i].y) / 2 + pRy2[i].y;

hexRy[c + 1] = {

x: x,

y: y,

a: A,

level: 2

}

}

return hexRy;

}

function Draw() {

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

a += speed;

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

if (a <= 180 && hexRy[i].level == level) {

drawHex(hexRy[i].x, hexRy[i].y, hexRy[i].a + a);

} else {

drawHex(hexRy[i].x, hexRy[i].y, 0);

}

if (a == 180) {

if (level == 3) {

level = 0;

} else {

level++;

}

a = 0;

}

}

requestId = window.requestAnimationFrame(Draw);

}

function start() {

A = 0, a = 0;

hexRy = buildRy(A);

requestId = window.requestAnimationFrame(Draw);

stopped = false;

}

function stopAnim() {

hexRy = [];

if (requestId) {

window.cancelAnimationFrame(requestId);

}

stopped = true;

}

window.addEventListener("load", start, false);

c.addEventListener("click", function() {

(stopped == true) ? start(): stopAnim();

}, false);

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！