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

代码语言:html

所属分类:粒子

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

代码标签: 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;
            }
            updat.........完整代码请登录后点击上方下载按钮下载查看

网友评论0