js实现canvas全息交互视觉效果代码-html代码-BFW代码库

js实现canvas全息交互视觉效果代码

代码语言：html

代码描述：js实现canvas全息交互视觉效果代码

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

<html lang="en"><head>

  <meta charset="UTF-8">

  
  
<style>
* {
  padding: 0;
  margin: 0;
  overflow: hidden;
}
</style>



</head>

<body>
  <!--
This pen is a reverse engineered (and slightly modified) version of the pen by Toshiya Marukubo (@toshiya-marukubo):

https://codepen.io/toshiya-marukubo/pen/mdRzyQz

I wanted to see how it worked and I figured I'd share :)
-->

  
      <script>
// This is a self-executing function (note the parenthesis at the end that cause it to run).
(() => {
  // This causes the browser to run this code in standards compliant mode rather than "quirks" mode.
  'use strict';

  // The next three lines create constant (unchangeable) references for a new canvas element, the canvas rendering context, and the diameter value, which determines the size and position of the rectangles that are drawn.
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const diameter = 15;

  // These values can't be constants because they need to change whenever the browser is resized or the user moves the mouse.
  let width = 0; // Width of the viewport
  let height = 0; // Height of the viewport
  let halfWidth = 0; // Half the width of the viewport (we're storing this to avoid having to calculate it repeatedly in the loop below).
  let frame; // This variable holds the reference to the frame from requestAnimationFrame so we can cancel the frame when the user resizes or changes the orientation of the browser window.
  let time = 0; // This is used to store the current position in the animation timeline.
  let destination = 1; // This is used to smoothe the animation transition to a new position in the timeline.

  // This function will be called initially on startup (below) and whenever the user resizes or reorients the browser window.
  const resize = () => {
    cancelAnimationFrame(frame); // Cancel the last requested animation frame (this prevents us having multiple animation loops running at the same time).
    width = canvas.width = window.innerWidth; // Set the width variable and the canvas width to the width of the viewport.
    height = canvas.height = window.innerHeight; // Set the height variable and the canvas height to the height of the viewport.
    halfWidth = width / 2; // Store half the width of the viewport to save unnecessary computations in the animation loop.
    ctx.globalCompositeOperation = 'lighter'; // This changes the mode of the canvas to blend colors together instead of simply stacking them (so drawing red on top of green produces yellow instead of just red on top of green). Also, this needs to be set after the canvas is resized or it does not work.
    loop(); // This starts the animation loop.
  };

  // This function runs repeatedly to draw each frame of the animation.
  const loop = () => {
    frame = requestAnimationF.........完整代码请登录后点击上方下载按钮下载查看