html制作圆环平移,HTML5/Canvas绘制圆环交叉动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var canvas = document.getElementsByTagName('canvas')[0];

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

canvas.width = canvas.height = 400;

aaa();

function aaa() {

var a, b, c, d, p, r, x, y, tim, max;

ctx.globalCompositeOperation = "source-over";

ctx.fillStyle = "rgb(0,0,0)";

ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.globalCompositeOperation = "lighter";

ctx.strokeStyle = ctx.fillStyle = "hsla(244,60%,60%,0.5)";

tim = new Date().getTime() / 90;

p = [];

for (b = 0; b < 3; b++) {

r = -tim / 79 * (b + 1);

if (b % 2 == 1) r = -r;

c = 100 + Math.sin(b + tim / 11) * 60 + Math.sin(b * 3 + tim / 19) * 60;

for (a = 0; a < 4; a++) {

x = Math.cos(r) * c;

y = Math.sin(r) * c;

p.push([x + 200, y + 200]);

r += Math.PI * 2 / 4;

}

}

max = p.length;

for (a = 0; a < max; a++) {

for (b = a + 1; b < max; b++) {

for (c = b + 1; c < max; c++) {

nai(p[a], p[b], p[c]);

}

}

}

requestAnimationFrame(aaa);

}

function nai(p1, p2, p3) {

var x, y, x1, y1, x2, y2, x3, y3, px, py, han;

x1 = p1[0];

y1 = p1[1];

x2 = p2[0];

y2 = p2[1];

x3 = p3[0];

y3 = p3[1];

y = (x1 - x3) * (x1 * x1 - x2 * x2 + y1 * y1 - y2 * y2) - (x1 - x2) * (x1 * x1 - x3 * x3 + y1 * y1 - y3 * y3);

y = y / (2 * (x1 - x3) * (y1 - y2) - 2 * (x1 - x2) * (y1 - y3));

x = (y1 - y3) * (y1 * y1 - y2 * y2 + x1 * x1 - x2 * x2) - (y1 - y2) * (y1 * y1 - y3 * y3 + x1 * x1 - x3 * x3);

x = x / (2 * (y1 - y3) * (x1 - x2) - 2 * (y1 - y2) * (x1 - x3));

px = x - x1;

py = y - y1;

han = Math.pow(px * px + py * py, 0.5);

ctx.beginPath();

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

ctx.stroke();

}