canvas新年快乐烟花绽放形成文字动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：canvas新年快乐烟花绽放形成文字动画效果代码

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

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

</head>
<body>
 

  <script>
      function GameCanvas(settings) {
          let top = this;
  
          this.functions = [];
          this.keys = [];
          this.ctrlPressed = false;
          this.shiftSPressed = false;
          this.altPressed = false;
          this.images = [];
          this.spheres = [];
          this.font = "Arial";
          this.imageData = undefined;
          this.imageDataData = undefined;
          this.lastLoop = performance.now();
          this.calculateFPS = true;
          this.fps = -1;
          this.deltaTime = 1;
          let mouseLookupTable = [
            "left",
            "middle",
            "right"
          ];
          this.contextMenuDisabled = false;
          this.disableScrollOnMobile = false;
          this.eventFunctions = {
              "mousedown": typeof OnMouseDown !== "undefined",
              "mouseup": typeof OnMouseUp !== "undefined",
              "mousemove": typeof OnMouseMove !== "undefined",
              "contextmenu": typeof OnContextMenu !== "undefined",
              "touchstart": typeof OnTouchStart !== "undefined",
              "touchend": typeof OnTouchEnd !== "undefined",
              "touchmove": typeof OnTouchMove !== "undefined",
              "keydown": typeof OnKeyDown !== "undefined",
              "keyup": typeof OnKeyUp !== "undefined"
          };
          this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
  
          this.createCanvas = function() {
              let canvas = document.createElement("canvas");
              document.body.appendChild(canvas);
              return canvas;
          }
          this.setSize = function(width, height) {
              if (top.canvas) {
                  top.canvas.width = top.width = width;
                  top.canvas.height = top.height = height;
                  window.width = this.width;
                  window.height = this.height;
              }
              else {
                  console.error("There is no canvas!");
              }
          }
          this.fillPageWithCanvas = function() {
              top.canvas.style.position = "fixed";
              top.canvas.style.top = "0px";
              top.canvas.style.left = "0px";
              top.setSize(window.innerWidth, window.innerHeight);
              top.disableScrollOnMobile = true;
              top.contextMenuDisabled = true;
              this.updateSizeOnResize = true;
          }
          this.requestFullscreen = function() {
              if (top.canvas.requestFullscreen)
                  top.canvas.requestFullscreen();
              else if (top.canvas.mozRequestFullScreen)
                  top.canvas.mozRequestFullScreen();
              else if (top.canvas.webkitRequestFullscreen)
                  top.canvas.webkitRequestFullscreen();
              else if (top.canvas.msRequestFullscreen)
                  top.canvas.msRequestFullscreen();
          }
          this.exitFullscreen = function() {
              if(document.exitFullscreen)
                  document.exitFullscreen();
              else if(document.mozCancelFullScreen)
                  document.mozCancelFullScreen();
              else if(document.webkitExitFullscreen)
                  document.webkitExitFullscreen();
              else if(document.msExitFullscreen)
                  document.msExitFullscreen();
          }
          this.lockPointer = function() {
              top.canvas.requestPointerLock = top.canvas.requestPointerLock || top.canvas.mozRequestPointerLock;
              top.canvas.requestPointerLock();
          }
          this.unlockPointer = function() {
              document.exitPointerLock = document.exitPointerLock || document.mozExitPointerLock;
              document.exitPointerLock();
          }
          this.disableContextMenu = function() {
              top.contextMenuDisabled = true;
          }
          this.enableContextMenu = function() {
              top.contextMenuDisabled = false;
          }
  
          this.key = function(key) {
              return top.keys[key];
          }
  
          this.isCtrlPressed = function() {
              return top.ctrlPressed;
          }
  
          this.isShiftPressed = function() {
              return top.shiftPressed;
          }
  
          this.isAltPressed = function() {
              return top.altPressed;
          }
  
          this.update = function() {
              if (top.calculateFPS) {
                  var thisLoop = performance.now();
                  var delta = (thisLoop - top.lastLoop);
                  top.fps = 1000 / delta;
                  top.deltaTime = delta / 1000;
                  top.lastLoop = thisLoop;
      
                  if (top.globalFunctions) {
                      window.fps = top.fps;
                      window.deltaTime = top.deltaTime;
                  }
              }
    
              top.mouse.movementX = 0;
              top.mouse.movementY = 0;
              top.mouse.lastX = top.mouse.x;
              top.mouse.lastY = top.mouse.y;
          }
  
          /******************
          
               Rendering
             
           ******************/
  
          this.clearScreen = function() {
              top.ctx.clearRect(0, 0, top.width, top.height);
          }
  
          this.background = function(color) {
              top.ctx.fillStyle = color;
              top.ctx.fillRect(0, 0, top.width, top.height);
          }
  
          this.circle = function(x, y, radius, color, strokeColor, lineWidth) {
              top.ctx.beginPath();
              top.ctx.arc(x, y, radius, 0, Math.PI * 2);
              top.ctx.fillStyle = color;
              if (strokeColor) top.ctx.strokeStyle = strokeColor;
              if (lineWidth) top.ctx.lineWidth = lineWidth;
              top.ctx.fill();
              if (strokeColor) top.ctx.stroke();
.........完整代码请登录后点击上方下载按钮下载查看