混沌世界动画特效

代码语言:html

所属分类:动画

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>A world of Turbulence</title>
<style>
    html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
* {
  border: none;
  margin: 0;
}
  </style>

</head>
<body translate="no">
<script>
      /**
 * @author Alex Andrix <alex@alexandrix.com>
 * @since 2019
 */


let App = {};
App.setup = function () {
  // The setup function initializes everything in a permanent way (will never be set anew)

  const canvas = document.createElement('canvas');
  //const maxWidth = 9933, maxHeight = 14043
  //const quality = 0.1
  //this.filename = "artwork"

  this.canvas = canvas;
  this.canvas.width = window.innerWidth; //maxWidth * quality//window.innerWidth
  this.canvas.height = window.innerHeight; //maxHeight * quality//3370//window.innerHeight
  this.ctx = this.canvas.getContext('2d');
  this.width = this.canvas.width;
  this.height = this.canvas.height;
  this.dataToImageRatio = Math.max(this.width, this.height) / 1000;

  // Blend mode /!\ Don't use if you can! Can be a mega source of lag, proportional to canvas size
  this.ctx.globalCompositeOperation = 'darker'; // This one is OK
  //this.ctx.globalCompositeOperation = 'lighter'// This one is OK

  thi.........完整代码请登录后点击上方下载按钮下载查看

网友评论0