js实现canvas激光房间效果代码-html代码-BFW代码库

js实现canvas激光房间效果代码

代码语言：html

所属分类：动画

代码描述：js实现canvas激光房间效果代码

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

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

<head>

    <meta charset="UTF-8">


    <script>
        window.requestAnimFrame = (function() {
          return (
            window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function(callback) {
              window.setTimeout(callback);
            }
          );
        });
        
        function init(elemid) {
          let canvas = document.getElementById(elemid),
            c = canvas.getContext("2d"),
            w = (canvas.width = window.innerWidth),
            h = (canvas.height = window.innerHeight);
          c.fillStyle = "rgba(30,30,30,1)";
          c.fillRect(0, 0, w, h);
          return {c:c,canvas:canvas};
        }
    </script>



    <style>
        body,
        html {
          margin: 0px;
          padding: 0px;
          position: fixed;
          background: rgb(30, 30, 30);
        }
    </style>



</head>

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

    <script>
        window.onload = function () {
          //functions definition
          function sin(x) {
            return Math.sin(x);
          }
          function cos(x) {
            return Math.cos(x);
          }
          function atan2(x, y) {
            return Math.atan2(y, x);
          }
          function dist(o1, o2) {
            return Math.sqrt(Math.pow(o2.x - o1.x, 2) + Math.pow(o2.y - o1.y, 2));
          }
          //class definition
          class light {
            constructor(x, y, ang, it, b) {
              this.x = x;
              this.y = y;
              this.it = it;
              this.ang = ang;
              this.alpha = 0;
              this.l = 0;
              this.b = b;
            }
            update(m, t) {
              if (t) {
                this.ang = t;
              }
              if (m) {
                this.x = m.x;
                this.y = m.y;
              }
        
              this.beta1 = atan2(edges[0] - this.x, edges[1] - this.y);
              this.beta2 = atan2(edges[2] - this.x, edges[1] - this.y);
              this.beta3 = atan2(edges[2] - this.x, edges[3] - this.y);
              this.beta4 = atan2(edges[0] - this.x, edges[3] - this.y);
              this.d1 = dist(this, { x: edges[0], y: edges[1] });
              this.d2 = dist(this, { x: edges[2], y: edges[1] });
              this.d3 = dist(this, { x: edges[2], y: edges[3] });
              this.d4 = dist(this, { x: edges[0], y: edges[3] });
        
              while (this.ang > Math.PI) {
                this.ang -= 2 * Math.PI;
              }
              while (this.ang < -Math.PI) {
                this.ang += 2 * Math.PI;
              }
        
              if (this.beta4 < this.ang && this.ang < this.beta1) {
                this.alpha = this.ang;
                this.l = (edges[0] - this.x) / cos(this.alpha);
                this.nalpha = Math.PI - this.alpha;
              }
              if (this.beta1 < this.ang && this.ang < this.beta2) {
                this.alpha = this.ang - Math.PI / 2;
                this.l = (edges[1] - this.y) / cos(this.alpha);
                this.nalpha = -Math.PI / 2 - this.alpha;
              }
              if (this.beta2 < this.ang && this.ang <= Math.PI) {
                this.alp.........完整代码请登录后点击上方下载按钮下载查看