canvas实现粒子宇宙星系交互动画效果代码-html代码-BFW代码库

canvas实现粒子宇宙星系交互动画效果代码

代码语言：html

所属分类：粒子

代码描述：canvas实现粒子宇宙星系交互动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        html, body {
          width:  100%;
          height: 100%;
          margin: 0;
          background: rgb(30,30,30);
        }
        
        #C{
        }
    </style>


</head>

<body>
    <canvas id="C"></canvas>

    <script>
        window.onload = function () {
          let ctx = document.getElementById("C"),
          c = ctx.getContext("2d"),
          w,
          h;
          fitCanvas();
        
          let mouse = { x: w / 2, y: h / 4 },
          last_mouse = {};
        
          function curcumicenter(A, B, C) {
            let D = 2 * (A.x * (B.y - C.y) + B.x * (C.y - A.y) + C.x * (A.y - B.y));
            let S = {
              x: 1 / D * ((A.x * A.x + A.y * A.y) * (B.y - C.y) + (B.x * B.x + B.y * B.y) * (C.y - A.y) + (C.x * C.x + C.y * C.y) * (A.y - B.y)),
              y: 1 / D * ((A.x * A.x + A.y * A.y) * (C.x - B.x) + (B.x * B.x + B.y * B.y) * (A.x - C.x) + (C.x * C.x + C.y * C.y) * (B.x - A.x)) };
        
            return S;
          }
          function dist(A, B) {
            return Math.sqrt(Math.pow(A.x - B.x, 2) + Math.pow(A.y - B.y, 2));
          }
          class point {
            constructor(x, y) {
              this.x = x;
              this.y = y;
              this.shown = false;
            }
            update(x, y) {
              this.x = x;
              this.y = y;
            }
            show(color, size) {
              if (!this.shown) {
                c.fillStyle = color;
                c.fillRect(this.x - size / 2, this.y - size / 2, size, size);
                this.shown = true;
              }
            }
            cleanup() {
              this.shown = false;
            }}
        
          class triangle {
            constructor(A, B, C) {
              this.a = A;
              this.b = B;
              this.c = C;
        
              this.scc = curcumicenter(A, B, C);
              this.s = new point(this.scc.x, this.scc.y);
        
              this.x = dist(this.s, this.a);
        
              this.c1 = dist(this.a, this.b) / 2;
              this.c2 = dist(this.b, this.c) / 2;
              this.c3 = dist(this.c, this.a) / 2;
        
              this.a2ab = Math.atan2(this.a.y - this.b.y, this.a.x - this.b.x);
              this.a2bc = Math.atan2(this.b.y - this.c.y, this.b.x - this.c.x);
              this.a2ca = Math.atan2(this.c.y - this.a.y, this.c.x - this.a.x);
        
              this.rab = Math.sqrt(this.x * this.x - this.c1 * this.c1);
              this.rbc = Math.sqrt(this.x * this.x - this.c2 * this.c2);
              this.rca = Math.sqrt(this.x * this.x - this.c3 * this.c3);
        
              this.s1 = new point(
              this.s.x + this.rab / 2 * Math.cos(this.a2ab + Math.PI / 2),
              this.s.y + this.rab / 2 * Math.sin(this.a2ab + Math.PI / 2));
        
              this.s2 = new point(
              this.s.x + this.rbc / 2 * Math.cos(this.a2bc + Math.PI / 2),
              this.s.y + this.rbc / 2 * Math.sin(this.a2bc + Math.PI / 2));
        
              this.s3 = new point(
              this.s.x + this.rca / 2 * Math.cos(this.a2ca + 5 * Math.PI / 2),
              this.s.y + this.rca / 2 * Math.sin(this.a2ca + 5 * Math.PI / 2));
        
            }
            move(m) {
              this.c = m;
              this.scc = curcumicenter(this.a, this.b, this.c);
              this.s.update(this.scc.x, this.scc.y);
        
              this.x = dist(this.s, this.a);
              this.c1 = dist(this.a, this.b) / 2;
              this.c2 = dist(this.b, this.c) / 2;
              this.c3 = dist(this.c, this.a) / 2;
              this.a2ab = Math.atan2(this.a.y - this.b.y, this.a.x - this.b.x);
              this.a2bc = Math.atan2(this.b.y - this.c.y, this.b.x - this.c.x);
              this.a2ca = Math.atan2(this.c.y - this.a.y, this.c.x - this.a.x);
              this.rab = Math.sqrt(this.x * this.x - this.c1 * this.c1);
              this.rbc = Math.sqrt(this.x * this.x - this.c2 * this.c2);
              this.rca = Math.sqrt(this.x * this.x - this.c3 * this.c3);
        
              this.s1.update(
              this.s.x + this.rab / 2 * Math.cos(this.a2ab + Math.PI / 2),
              this.s.y + this.rab / 2 * Math.sin(this.a2ab + Math.PI / 2));
  .........完整代码请登录后点击上方下载按钮下载查看