H5，恶魔之眼效果实现

代码如下：
<!DOCTYPE html>
<html>
 <head>
  <title> ... </title>
  <meta charset="utf-8"/>
  <meta name="HSW" content="">
  <meta name="Keywords" content="">
  <style>
	* {
		margin: 0;
		padding: 0;
		border: 0;
	}
	canvas {
		width: 100%;
		height: 100%;
	}
  </style>
 </head>

 <body>
  <canvas></canvas>
 </body>
 <script>
	
	var canvas, ctx, ban, tim;
canvas = document.getElementsByTagName('canvas')[0];
ctx = canvas.getContext('2d');
canvas.width = canvas.height = 400;
ctx.fillRect(0, 0, 400, 400);
ctx.strokeStyle = "rgb(0,0,0)";
main();

function main() {
    var a, b, tx, ty;
    ctx.globalCompositeOperation = "source-over";
    tim = new Date().getTime() / 40;
    ban = 0;
    ctx.fillStyle = "rgb(0,0,0)";
    ctx.fillRect(0, 0, 400, 400);
    b = 0;
    a = Math.sin(tim / 73);
    tx = 200 + Math.cos(-tim / 23) * 50 * a;
    ty = 200 + Math.sin(-tim / 23) * 50 * a;

    for (a = 0; a < 3; a++) {
        rus(tx, ty, tim / 97 + b, 0.8, 1, 0);
        b += Math.PI * 2 / 3;
    }
    requestAnimationFrame(main);
}

function rus(x, y, r, s, pm, kai) {
    var a, b, c, d, e, px, py, max, bn;
    ctx.globalCompositeOperation = "source-over";
    ban++;
    bn = ban;
    max = 40;
    c = 0.26 + Math.sin(tim / 37 + ban) * 0.13;
    c *= 1 + Math.sin(tim / 73) / 5;
    d = [];
    for (a = 0; a < max; a++) {
        b = (max - a) / max;
        px = Math.cos(r);
        py = Math.sin(r);
        r += (1.4 - b * s) * c * pm;
        d[a] = [px, py, x, y, b * s, r];
        x += px * b * 10 * s;
        y += py * b * 10 * s;
        if (b * s < 0.07) break;
    }


    for (c = 0; c < 2; c++) {
        if (c) {
            e = 2;
            ctx.fillStyle = "hsl(" + (kai * 17 + (tim % 360) | 0) + ",60%,70%)";
        } else {
            e = 6;
            ctx.fillStyle = "hsl(" + (kai * 23 + (tim % 360) | 0) + ",60%,40%)";
        }

        ctx.beginPath();
        for (a = 0; a < d.length; a++) {
            b = d[a];
            ctx[(a ? "line" : "move") + "To"](b[2] + b[1] * b[4] * e, b[3] - b[0] * b[4] * e);
        }
        for (a = d.length - 2; a >= 0; a--) {
            b = d[a];
            ctx.lineTo(b[2] - b[1] * b[4] * e, b[3] + b[0] * b[4] * e);
        }
        ctx.fill();
    }

    if (s > 0.41) {
        for (a = 4; a < d.length; a += 10) {
            b = d[a];
            c = 0.5 + Math.sin(tim / 53 + a + ban * 67) / 2;
            rus(b[2], b[3], b[5] - pm * c, b[4] * 1.02, pm * -1, kai + 1);
        }
    }

    if (d[bn % 13] && bn % 4 == 3) {
        ctx.globalCompositeOperation = "source-over";
        ctx.strokeStyle = "rgb(0,0,0)";
        b = d[bn % 13];
        ctx.fillStyle = "rgb(222,222,222)";
        ctx.beginPath();
        ctx.arc(b[2], b[3], 40 * b[4], 0, Math.PI * 2, false);
        ctx.fill();
        ctx.lineWidth = 1;
        ctx.stroke();

        if ((tim) % 3 > 1) {
            ctx.fillStyle = "rgb(215,15,0)";
        } else {
            ctx.fillStyle = "rgb(0,15,215)";
        }

        c = Math.sin(bn + tim / 13) * 15 * b[4];
        x = Math.cos(bn + tim / 41 * pm) * c;
        y = Math.sin(bn + tim / 41 * pm) * c;
        ctx.beginPath();
        ctx.arc(b[2] + x, b[3] + y, 15 * b[4], 0, Math.PI * 2, false);
        ctx.fill();
        ctx.lineWidth = 2;
        ctx.stroke();
        ctx.fillStyle = "rgb(0,0,0)";
        ctx.beginPath();
        ctx.arc(b[2] + x * 1.1, b[3] + y * 1.1, 6 * b[4], 0, Math.PI * 2, false);
        ctx.fill();
    }

    if (d[bn % 7] && bn % 7 == 4) {
        ctx.fillStyle = "hsla(" + (kai * 17 + (tim % 360) | 0) + ",60%,90%,0.12)";
        ctx.globalCompositeOperation = "lighter";
        b = d[bn % 7];
        for (a = 0; a < 4; a++) {
            c = (a + 1) * 5 + 20;
            ctx.beginPath();
            ctx.moveTo(b[2], b[3]);
            ctx.lineTo(b[2] + b[0] * 400 + b[1] * c, b[3] + b[1] * 400 - b[0] * c);
            ctx.lineTo(b[2] + b[0] * 400 - b[1] * c, b[3] + b[1] * 400 + b[0] * c);
            ctx.fill();
        }
    }
}

 </script>
</html>
H5，恶魔之眼效果实现

猜你喜欢
