devbox
知新_RL
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

实战： 跨年烟花代码的实现（附源码）_跨年代码可复制2023

作者：知新_RL | 2024-02-16 19:32:36

赞

踩

跨年代码可复制2023

目录

前言

一、pandas是什么？

二、代码结构

1.介绍主html代码

2. js文件介绍

GameCanvas.js

script.js

运行效果

前言

本文章将介绍跨年烟花代码的实现以及源代码

提示：以下是本篇文章正文内容

一、pandas是什么？

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

二、代码结构

1.介绍主html代码

代码如下： 

  1. <!DOCTYPE html>
  2. <html lang="en" >
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>2023新年快乐</title>
  6. </head>
  7.  
  8. <body>
  9.  
  10. <script src='js/gameCanvas-4.0.js'></script>
  11. <script src="js/script.js"></script>
  12.  
  13. <setTimeout(function() {
  14.     setInterval(function() {
  15.       fireworks.push(new Firework(Math.random() * width, height, Math.random() - 0.5, -(Math.random() * 7 + 5)));
  16.     }, 200);
  17.   }, 2000);
  18.   
  19.   fireworks.push(new Firework(width / 2, height, 0, -9.5, 10, "gold", true));
  20.   setInterval(function() {
  21.     fireworks.push(new Firework(width / 2, height, 0, -9.5, 10, "gold", true));
  22.   }, 5000);
  23.   
  24.   for (var i = 0; i < 250; i++) {
  25.     circle(
  26.       Math.random() * width,
  27.       Math.random() * height,
  28.       1,
  29.       "rgb(200, 200, 200)"
  30.     );
  31.   }
  32.   var starImage = canvasToImage();
  33.   
  34.   background("black");
  35.   loop();
  36.   function loop() {
  37.     gc.ctx.globalCompositeOperation = "source-over";
  38.     background("rgba(0, 0, 0, 0.1)");
  39.     gc.ctx.drawImage(starImage, 0, 0);
  40.     gc.ctx.globalCompositeOperation = "lighter";
  41.     
  42.     for (var i = 0; i < fireworks.length; i++) {
  43.       var firework = fireworks[i];
  44.       firework.update();
  45.       firework.render();
  46.     }
  47.     
  48.     for (var i = 0; i < particles.length; i++) {
  49.       var particle = particles[i];
  50.       particle.update();
  51.       particle.render();
  52.     }
  53.     
  54.     for (var i = 0; i < titleParticles.length; i++) {
  55.       var p = titleParticles[i];
  56.       p.update();
  57.       p.render();
  58.     }
  59.     
  60.     requestAnimationFrame(loop);
  61.   }
  62.   
  63.   function TitleParticle(x, y, vx, vy) {
  64.     this.x = x;
  65.     this.y = y;
  66.     this.vx = vx;
  67.     this.vy = vy;
  68.     this.ay = 0.2;
  69.     this.radius = 4;
  70.     this.maxHealth = 200;
  71.     this.health = 200;
  72.     
  73.     this.update = function() {
  74.       this.x += this.vx;
  75.       this.y += this.vy;
  76.       this.vx *= 0.95;
  77.       this.vy *= 0.95;
  78.       this.vy += this.ay;
  79.       this.ay *= 0.95;
  80.       
  81.       this.radius = (this.health / this.maxHealth) * 4;
  82.       this.health--;
  83.       if (this.health <= 0) {
  84.         titleParticles.splice(titleParticles.indexOf(this), 1);
  85.       }
  86.     }
  87.     
  88.     this.render = function() {
  89.        circle(this.x, this.y, this.radius, "rgba(255, 255, 255, " + (this.health / this.maxHealth) + ")");
  90.     }
  91.   }
  92.   
  93.   function Firework(x, y, vx, vy, radius = 5, color = "white", title = false) {
  94.     this.x = x;
  95.     this.y = y;
  96.     this.vx = vx;
  97.     this.vy = vy;
  98.     this.radius = radius;
  99.     this.title = title;
  100.     this.color = color;
  101. </body>
  102.  
  103. </html>

可以看到引入了两个js文件，也同样在本地。 

2. js文件介绍

代码如下：

GameCanvas.js

  1. function GameCanvas(settings) {
  2.   let top = this;
  3.   
  4.   this.functions = [];
  5.   this.keys = [];
  6.   this.images = [];
  7.   this.spheres = [];
  8.   this.font = "Arial";
  9.   this.imageData = undefined;
  10.   this.imageDataData = undefined;
  11.   this.lastLoop = performance.now();
  12.   this.calculateFPS = true;
  13.   this.fps = -1;
  14.   this.deltaTime = 1;
  15.   let mouseLookupTable = [
  16.     "left",
  17.     "middle",
  18.     "right"
  19.   ];
  20.   this.contextMenuDisabled = false;
  21.   this.disableScrollOnMobile = false;
  22.   this.eventFunctions = {
  23.     "mousedown": typeof OnMouseDown !== "undefined",
  24.     "mouseup": typeof OnMouseUp !== "undefined",
  25.     "mousemove": typeof OnMouseMove !== "undefined",
  26.     "contextmenu": typeof OnContextMenu !== "undefined",
  27.     "touchstart": typeof OnTouchStart !== "undefined",
  28.     "touchend": typeof OnTouchEnd !== "undefined",
  29.     "touchmove": typeof OnTouchMove !== "undefined",
  30.   };
  31.   this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
  32.   
  33.   this.createCanvas = function() {
  34.     let canvas = document.createElement("canvas");
  35.     document.body.appendChild(canvas);
  36.     return canvas;
  37.   }
  38.   this.setSize = function(width, height) {
  39.     if (top.canvas) {
  40.       top.canvas.width = top.width = width;
  41.       top.canvas.height = top.height = height;
  42.       window.width = this.width;
  43.       window.height = this.height;
  44.     }
  45.     else {
  46.       console.error("There is no canvas!");
  47.     }
  48.   }
  49.   this.fillPageWithCanvas = function() {
  50.     top.canvas.style.position = "fixed";
  51.     top.canvas.style.top = "0px";
  52.     top.canvas.style.left = "0px";
  53.     top.setSize(window.innerWidth, window.innerHeight);
  54.     top.disableScrollOnMobile = true;
  55.     top.contextMenuDisabled = true;
  56.     this.updateSizeOnResize = true;
  57.   }
  58.   this.requestFullscreen = function() {
  59.     if (top.canvas.requestFullscreen)
  60.       top.canvas.requestFullscreen();
  61.     else if (top.canvas.mozRequestFullScreen)
  62.       top.canvas.mozRequestFullScreen();
  63.     else if (top.canvas.webkitRequestFullscreen)
  64.       top.canvas.webkitRequestFullscreen();
  65.     else if (top.canvas.msRequestFullscreen)
  66.       top.canvas.msRequestFullscreen();
  67.   }
  68.   this.exitFullscreen = function() {
  69.     if(document.exitFullscreen)
  70.       document.exitFullscreen();
  71.     else if(document.mozCancelFullScreen)
  72.       document.mozCancelFullScreen();
  73.     else if(document.webkitExitFullscreen)
  74.       document.webkitExitFullscreen();
  75.     else if(document.msExitFullscreen)
  76.       document.msExitFullscreen();
  77.   }
  78.   this.lockPointer = function() {
  79.     top.canvas.requestPointerLock = top.canvas.requestPointerLock || top.canvas.mozRequestPointerLock;
  80.     top.canvas.requestPointerLock();
  81.   }
  82.   this.unlockPointer = function() {
  83.     document.exitPointerLock = document.exitPointerLock || document.mozExitPointerLock;
  84.     document.exitPointerLock();
  85.   }
  86.   this.disableContextMenu = function() {
  87.     top.contextMenuDisabled = true;
  88.   }
  89.   this.enableContextMenu = function() {
  90.     top.contextMenuDisabled = false;
  91.   }
  92.   
  93.   this.key = function(key) {
  94.     return top.keys[key];
  95.   }
  96.   
  97.   this.update = function() {
  98.     if (top.calculateFPS) {
  99.       var thisLoop = performance.now();
  100.       top.fps = 1000 / (thisLoop - top.lastLoop);
  101.       top.deltaTime = 60 / top.fps;
  102.       top.lastLoop = thisLoop;
  103.       
  104.       if (top.globalFunctions) {
  105.         window.fps = top.fps;
  106.         window.deltaTime = top.deltaTime;
  107.       }
  108.     }
  109.     
  110.     top.mouse.movementX = 0;
  111.     top.mouse.movementY = 0;
  112.     top.mouse.lastX = top.mouse.x;
  113.     top.mouse.lastY = top.mouse.y;
  114.   }
  115.   
  116.   /******************
  117.   
  118.        Rendering
  119.      
  120.    ******************/
  121.   
  122.   this.clearScreen = function() {
  123.     top.ctx.clearRect(0, 0, top.width, top.height);
  124.   }
  125.   
  126.   this.background = function(color) {
  127.     top.ctx.fillStyle = color;
  128.     top.ctx.fillRect(0, 0, top.width, top.height);
  129.   }
  130.   
  131.   this.circle = function(x, y, radius, color, strokeColor, lineWidth) {
  132.     top.ctx.beginPath();
  133.     top.ctx.arc(x, y, radius, 0, Math.PI * 2);
  134.     top.ctx.fillStyle = color;
  135.     if (strokeColor) top.ctx.strokeStyle = strokeColor;
  136.     if (lineWidth) top.ctx.lineWidth = lineWidth;
  137.     top.ctx.fill();
  138.     if (strokeColor) top.ctx.stroke();
  139.   }
  140.   
  141.   this.ring = function(x, y, radius, color, lineWidth) {
  142.     top.ctx.beginPath();
  143.     top.ctx.arc(x, y, radius, 0, Math.PI * 2);
  144.     top.ctx.strokeStyle = color;
  145.     if (lineWidth) top.ctx.lineWidth = lineWidth;
  146.     top.ctx.stroke();
  147.   }
  148.   
  149.   this.ellipse = function(x, y, radiusX, radiusY, color, rotation = 0, strokeColor, lineWidth) {
  150.     top.ctx.beginPath();
  151.     top.ctx.ellipse(x, y, radiusX, radiusY, rotation, 0, Math.PI * 2);
  152.     top.ctx.fillStyle = color;
  153.     if (strokeColor) top.ctx.strokeStyle = strokeColor;
  154.     if (lineWidth) top.ctx.lineWidth = lineWidth;
  155.     top.ctx.fill();
  156.     if (strokeColor) top.ctx.stroke();
  157.   }
  158.   
  159.   this.rectangle = function(x, y, width, height, color, strokeColor, lineWidth) {
  160.     top.ctx.fillStyle = color;
  161.     if (lineWidth) top.ctx.lineWidth = lineWidth;
  162.     if (strokeColor) {
  163.       top.ctx.beginPath();
  164.       top.ctx.strokeStyle = strokeColor;
  165.       top.ctx.rect(x, y, width, height);
  166.       top.ctx.fill();
  167.       top.ctx.stroke();
  168.     }
  169.     else
  170.       top.ctx.fillRect(x, y, width, height);
  171.   }
  172.   
  173.   this.triangle = function(x1, y1, x2, y2, x3, y3, color, strokeColor, lineWidth) {
  174.     top.ctx.beginPath();
  175.     top.ctx.moveTo(x1, y1);
  176.     top.ctx.lineTo(x2, y2);
  177.     top.ctx.lineTo(x3, y3);
  178.     top.ctx.closePath();
  179.     top.ctx.fillStyle = color;
  180.     if (lineWidth) top.ctx.lineWidth = lineWidth;
  181.     top.ctx.fill();
  182.     if (strokeColor) {
  183.       top.ctx.strokeStyle = strokeColor;
  184.       top.ctx.stroke();
  185.     }
  186.   }
  187.   
  188.   this.setLineCap = function(lineCap) {
  189.     top.ctx.lineCap = lineCap;
  190.   }
  191.   
  192.   this.resetLineCap = function() {
  193.     top.ctx.lineCap = "butt";
  194.   }
  195.   
  196.   this.line = function(x1, y1, x2, y2, strokeWeight, color) {
  197.     top.ctx.beginPath();
  198.     top.ctx.moveTo(x1, y1);
  199.     top.ctx.lineTo(x2, y2);
  200.     if (color) top.ctx.strokeStyle = color;
  201.     if (strokeWeight) top.ctx.lineWidth = strokeWeight;
  202.     top.ctx.stroke();
  203.   }
  204.   
  205.   this.picture = function(url, x, y, width, height) {
  206.     var imageElement = top.images[url];
  207.     if (!imageElement) {
  208.       var img = new Image();
  209.       img.src = url;
  210.       img.onload = function() {
  211.         top.ctx.drawImage(img, x, y, width, height);
  212.       }
  213.       top.images[url] = img;
  214.     }
  215.     else if (imageElement.complete) {
  216.       top.ctx.drawImage(imageElement, x, y, width, height);
  217.     }
  218.   }
  219.   
  220.   this.setFont = function(font) {
  221.     top.font = font;
  222.   }
  223.   
  224.   this.setTextAlign = function(align) {
  225.     top.ctx.textAlign = align;
  226.   }
  227.   
  228.   this.setTextXAlign = function(align) {
  229.     top.ctx.textAlign = align;
  230.   }
  231.   
  232.   this.setTextYAlign = function(align) {
  233.     top.ctx.textBaseline = align;
  234.   }
  235.   
  236.   this.resetTextXAlign = function() {
  237.     top.ctx.textAlign = "left";
  238.   }
  239.   
  240.   this.resetTextYAlign = function() {
  241.     top.ctx.textBaseline = "alphabetic";
  242.   }
  243.   
  244.   this.text = function(textString, x, y, fontSize, color, strokeColor, lineWidth) {
  245.     top.ctx.beginPath();
  246.     top.ctx.font = fontSize + "px " + top.font;
  247.     top.ctx.fillStyle = color;
  248.     if (lineWidth) top.ctx.lineWidth = lineWidth;
  249.     top.ctx.fillText(textString, x, y);
  250.     if (strokeColor) {
  251.       top.ctx.strokeStyle = strokeColor;
  252.       top.ctx.strokeText(textString, x, y);
  253.     }
  254.   }
  255.   
  256.   this.getPixelData = function() {
  257.     top.imageData = top.ctx.getImageData(0, 0, top.width, top.height);
  258.     top.imageDataData = top.imageData.data;
  259.   }
  260.   
  261.   this.updatePixel = function(x, y, r, g, b, a = 255) {
  262.     let i = (x + y * top.width) * 4;
  263.     top.imageDataData[i] = r;
  264.     top.imageDataData[i + 1] = g;
  265.     top.imageDataData[i + 2] = b;
  266.     top.imageDataData[i + 3] = a;
  267.   }
  268.   
  269.   this.updatePixelIndex = function(index, r, g, b, a = 255) {
  270.     var i = index * 4;
  271.     top.imageDataData[i] = r;
  272.     top.imageDataData[i + 1] = g;
  273.     top.imageDataData[i + 2] = b;
  274.     top.imageDataData[i + 3] = a;
  275.   }
  276.   
  277.   this.getPixel = function(x, y) {
  278.     let i = (x + y * top.width) * 4;
  279.     return [
  280.       top.imageDataData[i],
  281.       top.imageDataData[i + 1],
  282.       top.imageDataData[i + 2],
  283.       top.imageDataData[i + 3]
  284.     ];
  285.   }
  286.   
  287.   this.getPixelIndex = function(index) {
  288.     let i = index * 4;
  289.     return [
  290.       top.imageDataData[i],
  291.       top.imageDataData[i + 1],
  292.       top.imageDataData[i + 2],
  293.       top.imageDataData[i + 3]
  294.     ];
  295.   }
  296.   
  297.   this.renderPixelData = function() {
  298.     /*createImageBitmap(top.imageData).then(function(imgBitmap) {
  299.       top.ctx.drawImage(imgBitmap, 0, 0);
  300.     });*/
  301.     
  302.     top.ctx.putImageData(top.imageData, 0, 0);
  303.   }
  304.   
  305.   this.save = function() {
  306.     top.ctx.save();
  307.   }
  308.   
  309.   this.restore = function() {
  310.     top.ctx.restore();
  311.   }
  312.   
  313.   this.rotate = function(angle) {
  314.     top.ctx.rotate(angle);
  315.   }
  316.   
  317.   this.translate = function(x, y) {
  318.     top.ctx.translate(x, y);
  319.   }
  320.   
  321.   this.beginPath = function() {
  322.     top.ctx.beginPath();
  323.   }
  324.   
  325.   this.closePath = function() {
  326.     top.ctx.closePath();
  327.   }
  328.   
  329.   this.moveTo = function(x, y) {
  330.     top.ctx.moveTo(x, y);
  331.   }
  332.   
  333.   this.lineTo = function(x, y) {
  334.     top.ctx.lineTo(x, y);
  335.   }
  336.   
  337.   this.fill = function() {
  338.     top.ctx.fill();
  339.   }
  340.   
  341.   this.stroke = function() {
  342.     top.ctx.stroke();
  343.   }
  344.   
  345.   this.fillStyle = function(color) {
  346.     top.ctx.fillStyle = color;
  347.   }
  348.   
  349.   this.strokeStyle = function(color) {
  350.     top.ctx.strokeStyle = color;
  351.   }
  352.   
  353.   this.setLineWidth = function(lineWidth) {
  354.     top.ctx.lineWidth = lineWidth;
  355.   }
  356.   
  357.   /******************
  358.   
  359.        3D
  360.      
  361.    ******************/
  362.   
  363.   this.drawSphere = function(screenX, screenY, radius, color, lightDir = {x: 0, y: 0, z: 1}) {
  364.     var id = (screenX + screenY) * radius * (color[0] + 1) * (color[1] + 1) * (color[2] + 1) * (lightDir.x + 1) * (lightDir.y + 1) * (lightDir.z + 1);
  365.     if (top.spheres[id]) {
  366.       if (top.spheres[id].imageData)
  367.         top.ctx.putImageData(top.spheres[id].imageData, screenX - radius, screenY - radius);
  368.       else if (top.spheres[id].image)
  369.         top.ctx.drawImage(top.spheres[id].image, screenX - radius, screenY - radius);
  370.     }
  371.     else {
  372.       var imageData = top.ctx.createImageData(radius * 2, radius * 2);
  373.  
  374.       for (var y = 0; y < radius * 2; y++) {
  375.         for (var x = 0; x < radius * 2; x++) {
  376.           var line = {
  377.             origin: {x: x, y: y, z: 0},
  378.             direction: {x: 0, y: 0, z: 1}
  379.           };
  380.           var o = {
  381.             position: {x: radius, y: radius, z: radius * 2}
  382.           }
  383.  
  384.           var oc = {
  385.             x: line.origin.x - o.position.x,
  386.             y: line.origin.y - o.position.y,
  387.             z: line.origin.z - o.position.z
  388.           };
  389.           var loc = top.dot3D(line.direction, oc);
  390.           var ocLength = top.getLength(oc.x, oc.y, oc.z);
  391.           var underSqrt = loc * loc - (ocLength * ocLength - radius * radius);
  392.  
  393.           if (underSqrt >= 0) {
  394.             var d = -loc - Math.sqrt(underSqrt);
  395.             if (d > 0) { // Circle is not behind player and is closest to player
  396.               var hitPoint = {
  397.                 x: line.origin.x + line.direction.x * d,
  398.                 y: line.origin.y + line.direction.y * d,
  399.                 z: line.origin.z + line.direction.z * d
  400.               };
  401.               var surfaceNormal = top.normalize3DVector({
  402.                 x: o.position.x - hitPoint.x,
  403.                 y: o.position.y - hitPoint.y,
  404.                 z: o.position.z - hitPoint.z
  405.               });
  406.  
  407.               var diffuse = top.dot3D(lightDir, surfaceNormal);
  408.  
  409.               var index = (x + y * radius * 2) * 4;
  410.               imageData.data[index] = color[0] * diffuse;
  411.               imageData.data[index + 1] = color[1] * diffuse;
  412.               imageData.data[index + 2] = color[2] * diffuse;
  413.               imageData.data[index + 3] = 255;
  414.             }
  415.           }
  416.         }
  417.       }
  418.  
  419.       if (window.createImageBitmap) {
  420.         top.spheres[id] = {imageData: undefined, image: undefined};
  421.         createImageBitmap(imageData).then(function(imgBitmap) {
  422.           top.ctx.drawImage(imgBitmap, screenX - radius, screenY - radius);
  423.           top.spheres[id] = {imageData: undefined, image: imgBitmap};
  424.         });
  425.       }
  426.       else {
  427.         top.ctx.putImageData(imageData, screenX - radius, screenY - radius);
  428.         top.spheres[id] = {imageData, image: undefined};
  429.       }
  430.     }
  431.   }
  432.   
  433.   /******************
  434.   
  435.        Audio
  436.      
  437.    ******************/
  438.   
  439.   this.createSound = function(url, volume = 1, startTime = 0, looping = false) {
  440.     var audio = new Audio(url);
  441.     audio.loop = looping;
  442.     audio.currentTime = startTime;
  443.     audio.volume = volume;
  444.     
  445.     return {
  446.       volume,
  447.       startTime,
  448.       audio
  449.     };
  450.   }
  451.   
  452.   this.playSound = function(sound) {
  453.     sound.audio.currentTime = sound.startTime;
  454.     sound.audio.volume = sound.volume;
  455.     sound.audio.play();
  456.   }
  457.   
  458.   this.stopSound = function(sound) {
  459.     sound.audio.stop();
  460.   }
  461.   
  462.   this.pauseSound = function(sound) {
  463.     sound.audio.pause();
  464.   }
  465.   
  466.   this.backgroundMusic = function(url) {
  467.     var audio = new Audio(url);
  468.     audio.loop = true;
  469.     audio.play();
  470.     return audio;
  471.   }
  472.   
  473.   this.fadeOutSound = function(sound, time = 1) {
  474.     var startVolume = sound.volume;
  475.     var count = 0;
  476.     var interv = setInterval(() => {
  477.       sound.audio.volume = (startVolume / (time * 20)) * (time * 20 - count);
  478.       count++;
  479.       if (count > time * 20) {
  480.         sound.audio.pause();
  481.         clearInterval(interv);
  482.       }
  483.     }, 50);
  484.   }
  485.   
  486.   this.playTone = function(freq = 440, time = 1, volume = 1, type = "sine") {
  487.     var oscillator = top.audioContext.createOscillator();
  488.     
  489.     var gainNode = top.audioContext.createGain()
  490.     gainNode.gain.value = volume;
  491.     gainNode.connect(top.audioContext.destination);
  492.  
  493.     oscillator.type = type;
  494.     oscillator.frequency.value = freq;
  495.     oscillator.connect(gainNode);
  496.     oscillator.start();
  497.  
  498.     setTimeout(() => {
  499.       oscillator.stop();
  500.     }, time * 1000);
  501.   }
  502.   
  503.   /******************
  504.   
  505.        Math
  506.      
  507.    ******************/
  508.   
  509.   this.DegToRad = Math.PI / 180;
  510.   this.RadToDeg = 180 / Math.PI;
  511.   this.PI = Math.PI;
  512.   this.TWO_PI = Math.PI * 2;
  513.   this.TAU = this.TWO_PI;
  514.   
  515.   this.getDistanceSqr = function(x1, y1, x2, y2) {
  516.     var a = x1 - x2;
  517.     var b = y1 - y2;
  518.     return a * a + b * b;
  519.   }
  520.   
  521.   this.getDistanceSqr3D = function(x1, y1, x2, y2, z1, z2) {
  522.     var a = x1 - x2;
  523.     var b = y1 - y2;
  524.     var c = z1 - z2;
  525.     return a * a + b * b + c * c;
  526.   }
  527.   
  528.   this.getDistance = function(x1, y1, x2, y2) {
  529.     return Math.sqrt(top.getDistanceSqr(x1, y1, x2, y2));
  530.   }
  531.   
  532.   this.getDistance3D = function(x1, y1, x2, y2, z1, z2) {
  533.     return Math.sqrt(top.getDistanceSqr3D(x1, y1, x2, y2, z1, z2));
  534.   }
  535.   
  536.   this.getAngle = function(x1, y1, x2, y2) {
  537.     return Math.atan2(y2 - y1, x2 - x1);
  538.   }
  539.   
  540.   this.normalize = function(x, y) {
  541.     var len = Math.sqrt(x * x + y * y);
  542.     return {
  543.       x: x / len,
  544.       y: y / len
  545.     };
  546.   }
  547.   
  548.   this.normalize3D = function(x, y, z) {
  549.     var len = Math.sqrt(x * x + y * y + z * z);
  550.     return {
  551.       x: x / len,
  552.       y: y / len,
  553.       z: z / len
  554.     };
  555.   }
  556.   
  557.   this.normalize3DVector = function(x) {
  558.     var len = Math.sqrt(x.x * x.x + x.y * x.y + x.z * x.z);
  559.     return {
  560.       x: x.x / len,
  561.       y: x.y / len,
  562.       z: x.z / len
  563.     };
  564.   }
  565.   
  566.   this.lengthVector = function(v) {
  567.     return Math.sqrt(v.x * v.x + v.y * v.y);
  568.   }
  569.   
  570.   this.length3DVector = function(v) {
  571.     return Math.sqrt(v.x * v.x + v.y * v.y + v.z * v.z);
  572.   }
  573.   
  574.   this.getLength = function() {
  575.     var sum = 0;
  576.     for (var i = 0; i < arguments.length; i++) {
  577.       var arg = arguments[i];
  578.       sum += arg * arg;
  579.     }
  580.     return Math.sqrt(sum);
  581.   }
  582.   
  583.   this.dot = function(a, b) {
  584.     return a.x * b.x + a.y * b.y;
  585.   }
  586.   
  587.   this.dot3D = function(a, b) {
  588.     return a.x * b.x + a.y * b.y + a.z * b.z;
  589.   }
  590.   
  591.   this.crossProduct3D = function(v1, v2) {
  592.     return {
  593.       x: v1.y * v2.z - v1.z * v2.y,
  594.       y: v1.z * v2.x - v1.x * v2.z,
  595.       z: v1.x * v2.y - v1.y * v2.x
  596.     }
  597.   }
  598.   
  599.   //Intersection
  600.   this.rectanglesIntersect = function(x1, y1, w1, h1, x2, y2, w2, h2) {
  601.     return x1 + w1 > x2 && x1 < x2 + w2 && y1 + h1 > y2 && y1 < y2 + h2;
  602.   }
  603.   
  604.   this.circlesIntersect = function(x1, y1, r1, x2, y2, r2) {
  605.     return top.getDistance(x1, y1, x2, y2) < r1 + r2;
  606.   }
  607.   
  608.   this.circleRectangleIntersect = function(x1, y1, r1, x2, y2, w2, h2) {
  609.     var circleDistanceX = Math.abs(x1 - (x2 + w2 / 2));
  610.     var circleDistanceY = Math.abs(y1 - (y2 + h2 / 2));
  611.  
  612.     if (circleDistanceX > (w2 / 2 + r1)) return false;
  613.     if (circleDistanceY > (h2 / 2 + r1)) return false;
  614.  
  615.     if (circleDistanceX <= (w2 / 2)) return true; 
  616.     if (circleDistanceY <= (h2 / 2)) return true;
  617.  
  618.     var a = circleDistanceX - w2 / 2;
  619.     var b = circleDistanceY - h2 / 2;
  620.     var cornerDistance_sq = a * a + b * b;
  621.  
  622.     return cornerDistance_sq <= (r1 * r1);
  623.   }
  624.   
  625.   //Random
  626.   this.random = function(max) {
  627.     return Math.random() * max;
  628.   }
  629.   
  630.   this.randomInt = function(max) {
  631.     return Math.random() * max >> 0;
  632.   }
  633.   
  634.   this.randomArray = function(array) {
  635.     return array[Math.random() * array.length >> 0];
  636.   }
  637.   
  638.   this.randomColor = function(colorDepth) {
  639.     if (colorDepth) {
  640.       var colorStep = 256 / colorDepth;
  641.       var r = Math.ceil((Math.random() * 256 >> 0) / colorStep) * colorStep;
  642.       var g = Math.ceil((Math.random() * 256 >> 0) / colorStep) * colorStep;
  643.       var b = Math.ceil((Math.random() * 256 >> 0) / colorStep) * colorStep;
  644.       
  645.       return "rgb(" + r + "," + g + "," + b + ")";
  646.     }
  647.     else {
  648.       return "rgb(" + (Math.random() * 256 >> 0) + "," + (Math.random() * 256 >> 0) + "," + (Math.random() * 256 >> 0) + ")";
  649.     }
  650.   }
  651.   
  652.   this.create2DArray = function(w, h, value = () => 0) {
  653.     var array = new Array(w);
  654.     for (var i = 0; i < w; i++) {
  655.       array[i] = new Array(h);
  656.       for (var j = 0; j < h; j++) {
  657.         array[i][j] = value(i, j);
  658.       }
  659.     }
  660.     
  661.     return array;
  662.   }
  663.   
  664.   /******************
  665.   
  666.        Export
  667.      
  668.    ******************/
  669.   
  670.   this.canvasToURL = function() {
  671.     return top.canvas.toDataURL();
  672.   }
  673.  
  674.   this.canvasToImage = function() {
  675.     var img = new Image();
  676.     img.src = top.canvas.toDataURL();
  677.     return img;
  678.   }
  679.  
  680.   this.saveToFile = function(filename = "canvas.png") {
  681.     var a = document.createElement("a");
  682.     a.download = filename;
  683.     a.href = top.canvas.toDataURL();
  684.     a.click();
  685.   }
  686.   
  687.   /******************
  688.   
  689.        Cookies
  690.      
  691.    ******************/
  692.   
  693.   this.setCookie = function(name, value, expireDays = 36500) {
  694.     let d = new Date();
  695.     d.setTime(d.getTime() + (expireDays * 24 * 60 * 60 * 1000));
  696.     let expires = "expires=" + d.toUTCString();
  697.     document.cookie = name + "=" + value + ";" + expires + ";path=/";
  698.   }
  699.   
  700.   this.getCookie = function(name) {
  701.     if (name.length == 0)
  702.       return false;
  703.     
  704.     var cname = name + "=";
  705.     var split = document.cookie.split(";");
  706.     for (let i = 0; i < split.length; i++) {
  707.       let s = split[i];
  708.       var index = s.indexOf(cname);
  709.       if (index > 0) {
  710.         return s.substr(index + cname.length);
  711.       }
  712.     }
  713.     return false;
  714.   }
  715.   
  716.   this.deleteCookie = function(name) {
  717.     document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/";
  718.   }
  719.   
  720.   /******************
  721.   
  722.        Misc.
  723.      
  724.    ******************/
  725.   
  726.   //Battery level
  727.   if (navigator.getBattery) {
  728.     navigator.getBattery().then(function (battery) {
  729.       battery.addEventListener('levelchange', function() {
  730.         top.batteryLevel = battery.level * 100;
  731.       });
  732.       top.batteryLevel = battery.level * 100;
  733.     });
  734.   }
  735.   
  736.   this.getBatteryLevel = function() {
  737.     return top.batteryLevel;
  738.   }
  739.   
  740.   /******************
  741.   
  742.        Functions
  743.      
  744.    ******************/
  745.   
  746.   this.functions = [
  747.     {func: this.createCanvas, name: "createCanvas"},
  748.     {func: this.setSize, name: "setSize"},
  749.     {func: this.fillPageWithCanvas, name: "fillPageWithCanvas"},
  750.     {func: this.requestFullscreen, name: "requestFullscreen"},
  751.     {func: this.exitFullscreen, name: "exitFullscreen"},
  752.     {func: this.lockPointer, name: "lockPointer"},
  753.     {func: this.unlockPointer, name: "unlockPointer"},
  754.     {func: this.disableContextMenu, name: "disableContextMenu"},
  755.     {func: this.enableContextMenu, name: "enableContextMenu"},
  756.     {func: this.key, name: "key"},
  757.     {func: this.update, name: "update"},
  758.     
  759.     {func: this.clearScreen, name: "clearScreen"},
  760.     {func: this.background, name: "background"},
  761.     {func: this.circle, name: "circle"},
  762.     {func: this.ring, name: "ring"},
  763.     {func: this.ellipse, name: "ellipse"},
  764.     {func: this.rectangle, name: "rectangle"},
  765.     {func: this.triangle, name: "triangle"},
  766.     {func: this.picture, name: "picture"},
  767.     {func: this.setLineCap, name: "setLineCap"},
  768.     {func: this.resetLineCap, name: "resetLineCap"},
  769.     {func: this.line, name: "line"},
  770.     {func: this.setFont, name: "setFont"},
  771.     {func: this.setTextAlign, name: "setTextAlign"},
  772.     {func: this.setTextXAlign, name: "setTextXAlign"},
  773.     {func: this.setTextYAlign, name: "setTextYAlign"},
  774.     {func: this.resetTextXAlign, name: "resetTextXAlign"},
  775.     {func: this.resetTextYAlign, name: "resetTextYAlign"},
  776.     {func: this.text, name: "text"},
  777.     {func: this.getPixelData, name: "getPixelData"},
  778.     {func: this.updatePixel, name: "updatePixel"},
  779.     {func: this.updatePixelIndex, name: "updatePixelIndex"},
  780.     {func: this.getPixel, name: "getPixel"},
  781.     {func: this.getPixelIndex, name: "getPixelIndex"},
  782.     {func: this.renderPixelData, name: "renderPixelData"},
  783.     {func: this.save, name: "save"},
  784.     {func: this.restore, name: "restore"},
  785.     {func: this.rotate, name: "rotate"},
  786.     {func: this.translate, name: "translate"},
  787.     {func: this.beginPath, name: "beginPath"},
  788.     {func: this.closePath, name: "closePath"},
  789.     {func: this.moveTo, name: "moveTo"},
  790.     {func: this.lineTo, name: "lineTo"},
  791.     {func: this.fill, name: "fill"},
  792.     {func: this.stroke, name: "stroke"},
  793.     {func: this.fillStyle, name: "fillStyle"},
  794.     {func: this.strokeStyle, name: "strokeStyle"},
  795.     {func: this.setLineWidth, name: "setLineWidth"},
  796.     
  797.     {func: this.drawSphere, name: "drawSphere"},
  798.     
  799.     {func: this.createSound, name: "createSound"},
  800.     {func: this.playSound, name: "playSound"},
  801.     {func: this.stopSound, name: "stopSound"},
  802.     {func: this.pauseSound, name: "pauseSound"},
  803.     {func: this.fadeOutSound, name: "fadeOutSound"},
  804.     {func: this.playTone, name: "playTone"},
  805.     
  806.     {func: this.getDistanceSqr, name: "getDistanceSqr"},
  807.     {func: this.getDistance, name: "getDistance"},
  808.     {func: this.getDistanceSqr3D, name: "getDistanceSqr3D"},
  809.     {func: this.getDistance3D, name: "getDistance3D"},
  810.     {func: this.getAngle, name: "getAngle"},
  811.     {func: this.normalize, name: "normalize"},
  812.     {func: this.normalize3D, name: "normalize3D"},
  813.     {func: this.normalize3D, name: "normalize3DVector"},
  814.     {func: this.getLength, name: "getLength"},
  815.     {func: this.dot, name: "dot"},
  816.     {func: this.dot3D, name: "dot3D"},
  817.     {func: this.crossProduct3D, name: "crossProduct3D"},
  818.     {func: this.lengthVector, name: "lengthVector"},
  819.     {func: this.length3DVector, name: "length3DVector"},
  820.     
  821.     {func: this.rectanglesIntersect, name: "rectanglesIntersect"},
  822.     {func: this.circlesIntersect, name: "circlesIntersect"},
  823.     {func: this.circleRectangleIntersect, name: "circleRectangleIntersect"},
  824.     
  825.     {func: this.random, name: "random"},
  826.     {func: this.randomInt, name: "randomInt"},
  827.     {func: this.randomArray, name: "randomArray"},
  828.     {func: this.randomColor, name: "randomColor"},
  829.     
  830.     {func: this.create2DArray, name: "create2DArray"},
  831.     
  832.     {func: this.canvasToURL, name: "canvasToURL"},
  833.     {func: this.canvasToImage, name: "canvasToImage"},
  834.     {func: this.saveToFile, name: "saveToFile"},
  835.     
  836.     {func: this.setCookie, name: "setCookie"},
  837.     {func: this.getCookie, name: "getCookie"},
  838.     {func: this.deleteCookie, name: "deleteCookie"},
  839.     
  840.     {func: this.getBatteryLevel, name: "getBatteryLevel"}
  841.   ];
  842.   
  843.   this.variables = [
  844.     {variable: this.RadToDeg, name: "RadToDeg"},
  845.     {variable: this.DegToRad, name: "DegToRad"},
  846.     {variable: this.PI, name: "PI"},
  847.     {variable: this.TWO_PI, name: "TWO_PI"},
  848.     {variable: this.TAU, name: "TAU"}
  849.   ];
  850.   
  851.   this.makeFunctionsGlobal = function() {
  852.     this.globalFunctions = true;
  853.     this.functions.forEach(item => {
  854.       window[item.name] = item.func;
  855.     });
  856.     this.variables.forEach(item => {
  857.       window[item.name] = item.variable;
  858.     });
  859.     
  860.     window.fps = this.fps;
  861.     window.deltaTime = this.deltaTime;
  862.   }
  863.   
  864.   /******************
  865.   
  866.        Init
  867.      
  868.    ******************/
  869.   
  870.   this.settings = settings;
  871.   if (typeof this.settings === 'undefined') {
  872.     //Create a canvas and make it fullscreen
  873.     this.canvas = this.createCanvas();
  874.     this.fillPageWithCanvas();
  875.     
  876.     this.makeFunctionsGlobal();
  877.   }
  878.   else {
  879.     if (typeof this.settings.canvas !== "undefined")
  880.       this.canvas = this.settings.canvas;
  881.     else {
  882.       this.canvas = this.createCanvas();
  883.       if (typeof this.settings.width === "undefined" &&
  884.           typeof this.settings.height === "undefined")
  885.         this.fillPageWithCanvas();
  886.       
  887.       if (typeof this.settings.globalFunctions === "undefined" || (typeof this.settings.globalFunctions !== "undefined" && this.settings.globalFunctions))
  888.         this.makeFunctionsGlobal();
  889.     }
  890.     if (typeof this.settings.width !== "undefined") {
  891.       this.width = this.settings.width;
  892.       this.canvas.width = window.width = this.width;
  893.     }
  894.     if (typeof this.settings.height !== "undefined") {
  895.       this.height = this.settings.height;
  896.       this.canvas.height = window.height = this.height;
  897.     }
  898.     if (typeof this.settings.updateSizeOnResize !== "undefined") {
  899.       this.updateSizeOnResize = this.settings.updateSizeOnResize;
  900.     }
  901.   }
  902.   
  903.   document.addEventListener("keydown", event => {
  904.     this.keys[event.key] = this.keys[event.keyCode] = true;
  905.   });
  906.   document.addEventListener("keyup", event => {
  907.     this.keys[event.key] = this.keys[event.keyCode] = false;
  908.   });
  909.   
  910.   if (this.canvas) {
  911.     this.ctx = this.canvas.getContext("2d");
  912.     
  913.     if (this.updateSizeOnResize) {
  914.       window.addEventListener("resize", () => {
  915.         this.setSize(window.innerWidth, window.innerHeight);
  916.       });
  917.     }
  918.     
  919.     this.mouse = {x: 0, y: 0, lastX: 0, lastY: 0, movementX: 0, movementY: 0, left: false, middle: false, right: false, down: false};
  920.     this.touches = [];
  921.     if (this.globalFunctions) {
  922.       window.mouse = this.mouse;
  923.       window.touches = this.touches;
  924.     }
  925.     
  926.     this.canvas.addEventListener("mousemove", event => {
  927.       let br = this.canvas.getBoundingClientRect();
  928.       this.mouse.x = (event.clientX - br.left) / (br.width / this.width);
  929.       this.mouse.y = (event.clientY - br.top) / (br.height / this.height);
  930.       this.mouse.movementX = event.movementX;
  931.       this.mouse.movementY = event.movementY;
  932.       
  933.       this.eventFunctions["mousemove"] && OnMouseMove(event);
  934.     });
  935.     
  936.     this.canvas.addEventListener("mousedown", event => {
  937.       let button = event.button;
  938.       if (button < 3)
  939.         this.mouse[mouseLookupTable[button]] = true;
  940.       
  941.       if (!this.audioContext)
  942.         this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
  943.       
  944.       this.eventFunctions["mousedown"] && OnMouseDown(event);
  945.     });
  946.     
  947.     this.canvas.addEventListener("mouseup", event => {
  948.       let button = event.button;
  949.       if (button < 3)
  950.         this.mouse[mouseLookupTable[button]] = false;
  951.       
  952.       this.eventFunctions["mouseup"] && OnMouseUp(event);
  953.     });
  954.     
  955.     this.canvas.addEventListener("contextmenu", event => {
  956.       this.eventFunctions["contextmenu"] && OnContextMenu(event);
  957.       
  958.       if (this.contextMenuDisabled) {
  959.         event.preventDefault();
  960.         return false;
  961.       }
  962.       return true;
  963.     });
  964.     
  965.     //Touch
  966.     
  967.     this.updateTouches = function() {
  968.       let br = this.canvas.getBoundingClientRect();
  969.       
  970.       this.touches = [];
  971.       for (let i = 0; i < event.touches.length; i++) {
  972.         var e = event.touches[i];
  973.         var x = (e.pageX - br.left) / (br.width / this.width);
  974.         var y = (e.pageY - br.top) / (br.height / this.height);
  975.         this.touches[i] = {x, y, id: e.identifier, force: e.force};
  976.       }
  977.       
  978.       if (this.globalFunctions)
  979.         window.touches = this.touches;
  980.     }
  981.     
  982.     this.canvas.addEventListener("touchmove", event => {
  983.       if (this.disableScrollOnMobile)
  984.         event.preventDefault();
  985.      
  986.       this.updateTouches();
  987.       this.mouse.x = this.touches[0].x;
  988.       this.mouse.y = this.touches[0].y;
  989.       
  990.       this.eventFunctions["touchmove"] && OnTouchMove(event);
  991.     });
  992.     
  993.     this.canvas.addEventListener("touchend", event => {
  994.       if (this.disableScrollOnMobile)
  995.         event.preventDefault();
  996.       
  997.       this.touches = [];
  998.       if (this.globalFunctions)
  999.         window.touches = this.touches;
  1000.       
  1001.       this.mouse.left = false;
  1002.       
  1003.       this.eventFunctions["touchend"] && OnTouchEnd(event);
  1004.     });
  1005.     
  1006.     this.canvas.addEventListener("touchstart", event => {
  1007.       if (this.disableScrollOnMobile)
  1008.         event.preventDefault();
  1009.       
  1010.       this.updateTouches();
  1011.       this.mouse.x = this.touches[0].x;
  1012.       this.mouse.y = this.touches[0].y;
  1013.       this.mouse.left = true;
  1014.       
  1015.       if (!this.audioContext)
  1016.         this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
  1017.       
  1018.       this.eventFunctions["touchstart"] && OnTouchStart(event);
  1019.     });
  1020.   }
  1021. }

script.js

修改var points中包裹的文本可以改变烟花爆炸时出现的文字

  1.  
  2. var gc = new GameCanvas();
  3.  
  4. var points = textToPoints(" 2023新年快乐！", 15, "Anton");
  5.  
  6.  
  7. var titleParticles = [];
  8. var fireworks = [];
  9. var particles = [];
  10.  
  11. var gravity = 0.1;
  12.  
  13. setTimeout(function() {
  14.   setInterval(function() {
  15.     fireworks.push(new Firework(Math.random() * width, height, Math.random() - 0.5, -(Math.random() * 7 + 5)));
  16.   }, 200);
  17. }, 2000);
  18.  
  19. fireworks.push(new Firework(width / 2, height, 0, -9.5, 10, "gold", true));
  20. setInterval(function() {
  21.   fireworks.push(new Firework(width / 2, height, 0, -9.5, 10, "gold", true));
  22. }, 5000);
  23.  
  24. for (var i = 0; i < 250; i++) {
  25.   circle(
  26.     Math.random() * width,
  27.     Math.random() * height,
  28.     1,
  29.     "rgb(200, 200, 200)"
  30.   );
  31. }
  32. var starImage = canvasToImage();
  33.  
  34. background("black");
  35. loop();
  36. function loop() {
  37.   gc.ctx.globalCompositeOperation = "source-over";
  38.   background("rgba(0, 0, 0, 0.1)");
  39.   gc.ctx.drawImage(starImage, 0, 0);
  40.   gc.ctx.globalCompositeOperation = "lighter";
  41.   
  42.   for (var i = 0; i < fireworks.length; i++) {
  43.     var firework = fireworks[i];
  44.     firework.update();
  45.     firework.render();
  46.   }
  47.   
  48.   for (var i = 0; i < particles.length; i++) {
  49.     var particle = particles[i];
  50.     particle.update();
  51.     particle.render();
  52.   }
  53.   
  54.   for (var i = 0; i < titleParticles.length; i++) {
  55.     var p = titleParticles[i];
  56.     p.update();
  57.     p.render();
  58.   }
  59.   
  60.   requestAnimationFrame(loop);
  61. }
  62.  
  63. function TitleParticle(x, y, vx, vy) {
  64.   this.x = x;
  65.   this.y = y;
  66.   this.vx = vx;
  67.   this.vy = vy;
  68.   this.ay = 0.2;
  69.   this.radius = 4;
  70.   this.maxHealth = 200;
  71.   this.health = 200;
  72.   
  73.   this.update = function() {
  74.     this.x += this.vx;
  75.     this.y += this.vy;
  76.     this.vx *= 0.95;
  77.     this.vy *= 0.95;
  78.     this.vy += this.ay;
  79.     this.ay *= 0.95;
  80.     
  81.     this.radius = (this.health / this.maxHealth) * 4;
  82.     this.health--;
  83.     if (this.health <= 0) {
  84.       titleParticles.splice(titleParticles.indexOf(this), 1);
  85.     }
  86.   }
  87.   
  88.   this.render = function() {
  89.      circle(this.x, this.y, this.radius, "rgba(255, 255, 255, " + (this.health / this.maxHealth) + ")");
  90.   }
  91. }
  92.  
  93. function Firework(x, y, vx, vy, radius = 5, color = "white", title = false) {
  94.   this.x = x;
  95.   this.y = y;
  96.   this.vx = vx;
  97.   this.vy = vy;
  98.   this.radius = radius;
  99.   this.title = title;
  100.   this.color = color;
  101.   
  102.   this.update = function() {
  103.     this.x += this.vx;
  104.     this.y += this.vy;
  105.     this.vy += gravity;
  106.     
  107.     if (this.vy >= 0) {
  108.       fireworks.splice(fireworks.indexOf(this), 1);
  109.       
  110.       if (this.title) {
  111.         var scale = 0.3;
  112.         for (var i = 0; i < points.length; i++) {
  113.           var p = points[i];
  114.           var v = {
  115.             x: (p.x - 60) * scale + (Math.random() - 0.5) * 0.1,
  116.             y: (p.y - 20) * scale + (Math.random() - 0.5) * 0.1
  117.           }
  118.           var particle = new TitleParticle(this.x, this.y, v.x, v.y);
  119.           titleParticles.push(particle);
  120.         }
  121.       }
  122.       else {
  123.         var color = [Math.random() * 256 >> 0, Math.random() * 256 >> 0, Math.random() * 256 >> 0];
  124.         for (var i = 0; i < Math.PI * 2; i += 0.1) {
  125.           var power = (Math.random() + 0.5) * 4;
  126.           var vx = Math.cos(i) * power;
  127.           var vy = Math.sin(i) * power;
  128.           particles.push(new Particle(this.x, this.y, vx, vy, Math.random() + 3, color));
  129.         }
  130.       }
  131.     }
  132.   }
  133.   
  134.   this.render = function() {
  135.     circle(this.x, this.y, this.radius, this.color);
  136.   }
  137. }
  138.  
  139. function Particle(x, y, vx, vy, radius, color) {
  140.   this.x = x;
  141.   this.y = y;
  142.   this.vx = vx;
  143.   this.vy = vy;
  144.   this.life = 100;
  145.   this.color = color;
  146.   this.radius = radius;
  147.   
  148.   this.update = function() {
  149.     this.x += this.vx;
  150.     this.y += this.vy;
  151.     this.vy += gravity;
  152.     
  153.     this.vx *= 0.95;
  154.     this.vy *= 0.95;
  155.     
  156.     this.life--;
  157.     if (this.life <= 0) {
  158.       particles.splice(particles.indexOf(this), 1);
  159.     }
  160.   }
  161.   
  162.   this.render = function() {
  163.     circle(this.x, this.y, 3 * (this.life / 100), "rgba(" + this.color[0] + ", " + this.color[1] + ", " + this.color[2] + ", " + (this.life / 100) + ")");
  164.   }
  165. }
  166.  
  167. function textToPoints(text, textSize, font) {
  168.   var canvas = document.createElement("canvas");
  169.   canvas.width = 1024;
  170.   canvas.height = textSize * 1.3;
  171.   var ctx = canvas.getContext("2d");
  172.   
  173.   ctx.textBaseline = "middle";
  174.   ctx.font = textSize + "px " + font;
  175.   ctx.fillText(text, 0, canvas.height / 2);
  176.   
  177.   var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  178.   var data = imageData.data;
  179.   
  180.   var points = [];
  181.   var index = (x, y) => (x + canvas.width * y) * 4;
  182.   var threshold = 50;
  183.   
  184.   for (var i = 0; i < data.length; i += 4) {
  185.     if (data[i + 3] > threshold) {
  186.       var p = {
  187.         x: (i / 4) % canvas.width,
  188.         y: (i / 4) / canvas.width >> 0
  189.       };
  190.       
  191.       if (data[index(p.x + 1, p.y) + 3] < threshold ||
  192.           data[index(p.x - 1, p.y) + 3] < threshold ||
  193.           data[index(p.x, p.y + 1) + 3] < threshold ||
  194.           data[index(p.x, p.y - 1) + 3] < threshold) {
  195.         points.push({
  196.           x: (i / 4) % canvas.width,
  197.           y: (i / 4) / canvas.width >> 0
  198.         });
  199.       }
  200.     }
  201.   }
  202.   
  203.   return points;
  204. }

运行效果

光说不练假把式，看图：

运行效果如下

 

总结

以上就是今天要讲的内容，本文介绍了跨年烟花代码使用。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/96337
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号