没有编程也可以做烟花系列
2023年款跨年烟花
1.首先，打开文件资源管理系统，你需要在自己的电脑上创建一个文本文件
2.打开文本文件，并将下面的代码复制到该文本文件里面
Happy 2023新年快乐! $("#cnblogs_post_body img").attr("data-action", "zoom");!(function () {function n(n, e, t) {return n.getAttribute(e) || t;}function e(n) {return document.getElementsByTagName(n);}function t() {var t = e("script"),o = t.length,i = t[o - 1];return {l: o,z: n(i, "zIndex", -1),o: n(i, "opacity", 0.6),c: n(i, "color", "148,0,211"),n: n(i, "count", 99),};}function o() {(a = m.width =window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth),(c = m.height =window.innerHeight ||document.documentElement.clientHeight ||document.body.clientHeight);}function i() {r.clearRect(0, 0, a, c);var n, e, t, o, m, l;s.forEach(function (i, x) {for (i.x += i.xa,i.y += i.ya,i.xa *= i.x > a || i.x f; f++) {var h = w() * a,g = w() * c,v = 2 * w() - 1,p = 2 * w() - 1;s.push({ x: h, y: g, xa: v, ya: p, max: 6e3 });}(u = s.concat([y])),setTimeout(function () {i();}, 100);})();(function ($) {$.fn.snow = function (options) {var $flake = $('').css({ position: "absolute", "z-index": "9999", top: "-50px" }).html("❄"),documentHeight = $(document).height(),documentWidth = $(document).width(),defaults = {minSize: 10,maxSize: 20,newOn: 1000,flakeColor:"#00CED1" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */,},options = $.extend({}, defaults, options);var interval = setInterval(function () {var startPositionLeft = Math.random() * documentWidth - 100,startOpacity = 0.5 + Math.random(),sizeFlake = options.minSize + Math.random() * options.maxSize,endPositionTop = documentHeight - 200,endPositionLeft = startPositionLeft - 500 + Math.random() * 500,durationFall = documentHeight * 10 + Math.random() * 5000;$flake.clone().appendTo("body").css({left: startPositionLeft,opacity: startOpacity,"font-size": sizeFlake,color: options.flakeColor,}).animate({top: endPositionTop,left: endPositionLeft,opacity: 0.2,},durationFall,"linear",function () {$(this).remove();});}, options.newOn);};})(jQuery);$(function () {$.fn.snow({minSize: 5 /* 定义雪花最小尺寸 */,maxSize: 80 /* 定义雪花最大尺寸 */,newOn: 200 /* 定义密集程度，数字越小越密集 */,});});
3.保存，退出，然后将该文本文件改名为index.html文件类型
4.创建一个文件夹，并且重命名为js
5.打开js文件夹，创建两个文本文件，将下面的代码分别复制粘贴到两个文本文档里面，保存退出后，分别改名为gameCanvas-4.0.js，script.js。
gameCanvas-4.0.js
function GameCanvas(settings) {let top = this;this.functions = [];this.keys = [];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",};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.update = function () {if (top.calculateFPS) {var thisLoop = performance.now();top.fps = 1000 / (thisLoop - top.lastLoop);top.deltaTime = 60 / top.fps;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();}this.ring = function (x, y, radius, color, lineWidth) {top.ctx.beginPath();top.ctx.arc(x, y, radius, 0, Math.PI * 2);top.ctx.strokeStyle = color;if (lineWidth) top.ctx.lineWidth = lineWidth;top.ctx.stroke();}this.ellipse = function (x, y, radiusX, radiusY, color, rotation = 0, strokeColor, lineWidth) {top.ctx.beginPath();top.ctx.ellipse(x, y, radiusX, radiusY, rotation, 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();}this.rectangle = function (x, y, width, height, color, strokeColor, lineWidth) {top.ctx.fillStyle = color;if (lineWidth) top.ctx.lineWidth = lineWidth;if (strokeColor) {top.ctx.beginPath();top.ctx.strokeStyle = strokeColor;top.ctx.rect(x, y, width, height);top.ctx.fill();top.ctx.stroke();}elsetop.ctx.fillRect(x, y, width, height);}this.triangle = function (x1, y1, x2, y2, x3, y3, color, strokeColor, lineWidth) {top.ctx.beginPath();top.ctx.moveTo(x1, y1);top.ctx.lineTo(x2, y2);top.ctx.lineTo(x3, y3);top.ctx.closePath();top.ctx.fillStyle = color;if (lineWidth) top.ctx.lineWidth = lineWidth;top.ctx.fill();if (strokeColor) {top.ctx.strokeStyle = strokeColor;top.ctx.stroke();}}this.setLineCap = function (lineCap) {top.ctx.lineCap = lineCap;}this.resetLineCap = function () {top.ctx.lineCap = "butt";}this.line = function (x1, y1, x2, y2, strokeWeight, color) {top.ctx.beginPath();top.ctx.moveTo(x1, y1);top.ctx.lineTo(x2, y2);if (color) top.ctx.strokeStyle = color;if (strokeWeight) top.ctx.lineWidth = strokeWeight;top.ctx.stroke();}this.picture = function (url, x, y, width, height) {var imageElement = top.images[url];if (!imageElement) {var img = new Image();img.src = url;img.onload = function () {top.ctx.drawImage(img, x, y, width, height);}top.images[url] = img;}else if (imageElement.complete) {top.ctx.drawImage(imageElement, x, y, width, height);}}this.setFont = function (font) {top.font = font;}this.setTextAlign = function (align) {top.ctx.textAlign = align;}this.setTextXAlign = function (align) {top.ctx.textAlign = align;}this.setTextYAlign = function (align) {top.ctx.textBaseline = align;}this.resetTextXAlign = function () {top.ctx.textAlign = "left";}this.resetTextYAlign = function () {top.ctx.textBaseline = "alphabetic";}this.text = function (textString, x, y, fontSize, color, strokeColor, lineWidth) {top.ctx.beginPath();top.ctx.font = fontSize + "px " + top.font;top.ctx.fillStyle = color;if (lineWidth) top.ctx.lineWidth = lineWidth;top.ctx.fillText(textString, x, y);if (strokeColor) {top.ctx.strokeStyle = strokeColor;top.ctx.strokeText(textString, x, y);}}this.getPixelData = function () {top.imageData = top.ctx.getImageData(0, 0, top.width, top.height);top.imageDataData = top.imageData.data;}this.updatePixel = function (x, y, r, g, b, a = 255) {let i = (x + y * top.width) * 4;top.imageDataData[i] = r;top.imageDataData[i + 1] = g;top.imageDataData[i + 2] = b;top.imageDataData[i + 3] = a;}this.updatePixelIndex = function (index, r, g, b, a = 255) {var i = index * 4;top.imageDataData[i] = r;top.imageDataData[i + 1] = g;top.imageDataData[i + 2] = b;top.imageDataData[i + 3] = a;}this.getPixel = function (x, y) {let i = (x + y * top.width) * 4;return [top.imageDataData[i],top.imageDataData[i + 1],top.imageDataData[i + 2],top.imageDataData[i + 3]];}this.getPixelIndex = function (index) {let i = index * 4;return [top.imageDataData[i],top.imageDataData[i + 1],top.imageDataData[i + 2],top.imageDataData[i + 3]];}this.renderPixelData = function () {/*createImageBitmap(top.imageData).then(function(imgBitmap) {top.ctx.drawImage(imgBitmap, 0, 0);});*/top.ctx.putImageData(top.imageData, 0, 0);}this.save = function () {top.ctx.save();}this.restore = function () {top.ctx.restore();}this.rotate = function (angle) {top.ctx.rotate(angle);}this.translate = function (x, y) {top.ctx.translate(x, y);}this.beginPath = function () {top.ctx.beginPath();}this.closePath = function () {top.ctx.closePath();}this.moveTo = function (x, y) {top.ctx.moveTo(x, y);}this.lineTo = function (x, y) {top.ctx.lineTo(x, y);}this.fill = function () {top.ctx.fill();}this.stroke = function () {top.ctx.stroke();}this.fillStyle = function (color) {top.ctx.fillStyle = color;}this.strokeStyle = function (color) {top.ctx.strokeStyle = color;}this.setLineWidth = function (lineWidth) {top.ctx.lineWidth = lineWidth;}/****************** 3D******************/this.drawSphere = function (screenX, screenY, radius, color, lightDir = { x: 0, y: 0, z: 1 }) {var id = (screenX + screenY) * radius * (color[0] + 1) * (color[1] + 1) * (color[2] + 1) * (lightDir.x + 1) * (lightDir.y + 1) * (lightDir.z + 1);if (top.spheres[id]) {if (top.spheres[id].imageData)top.ctx.putImageData(top.spheres[id].imageData, screenX - radius, screenY - radius);else if (top.spheres[id].image)top.ctx.drawImage(top.spheres[id].image, screenX - radius, screenY - radius);}else {var imageData = top.ctx.createImageData(radius * 2, radius * 2);for (var y = 0; y < radius * 2; y++) {for (var x = 0; x = 0) {var d = -loc - Math.sqrt(underSqrt);if (d > 0) { // Circle is not behind player and is closest to playervar hitPoint = {x: line.origin.x + line.direction.x * d,y: line.origin.y + line.direction.y * d,z: line.origin.z + line.direction.z * d};var surfaceNormal = top.normalize3DVector({x: o.position.x - hitPoint.x,y: o.position.y - hitPoint.y,z: o.position.z - hitPoint.z});var diffuse = top.dot3D(lightDir, surfaceNormal);var index = (x + y * radius * 2) * 4;imageData.data[index] = color[0] * diffuse;imageData.data[index + 1] = color[1] * diffuse;imageData.data[index + 2] = color[2] * diffuse;imageData.data[index + 3] = 255;}}}}if (window.createImageBitmap) {top.spheres[id] = { imageData: undefined, image: undefined };createImageBitmap(imageData).then(function (imgBitmap) {top.ctx.drawImage(imgBitmap, screenX - radius, screenY - radius);top.spheres[id] = { imageData: undefined, image: imgBitmap };});}else {top.ctx.putImageData(imageData, screenX - radius, screenY - radius);top.spheres[id] = { imageData, image: undefined };}}}/****************** Audio******************/this.createSound = function (url, volume = 1, startTime = 0, looping = false) {var audio = new Audio(url);audio.loop = looping;audio.currentTime = startTime;audio.volume = volume;return {volume,startTime,audio};}this.playSound = function (sound) {sound.audio.currentTime = sound.startTime;sound.audio.volume = sound.volume;sound.audio.play();}this.stopSound = function (sound) {sound.audio.stop();}this.pauseSound = function (sound) {sound.audio.pause();}this.backgroundMusic = function (url) {var audio = new Audio(url);audio.loop = true;audio.play();return audio;}this.fadeOutSound = function (sound, time = 1) {var startVolume = sound.volume;var count = 0;var interv = setInterval(() => {sound.audio.volume = (startVolume / (time * 20)) * (time * 20 - count);count++;if (count > time * 20) {sound.audio.pause();clearInterval(interv);}}, 50);}this.playTone = function (freq = 440, time = 1, volume = 1, type = "sine") {var oscillator = top.audioContext.createOscillator();var gainNode = top.audioContext.createGain()gainNode.gain.value = volume;gainNode.connect(top.audioContext.destination);oscillator.type = type;oscillator.frequency.value = freq;oscillator.connect(gainNode);oscillator.start();setTimeout(() => {oscillator.stop();}, time * 1000);}/****************** Math******************/this.DegToRad = Math.PI / 180;this.RadToDeg = 180 / Math.PI;this.PI = Math.PI;this.TWO_PI = Math.PI * 2;this.TAU = this.TWO_PI;this.getDistanceSqr = function (x1, y1, x2, y2) {var a = x1 - x2;var b = y1 - y2;return a * a + b * b;}this.getDistanceSqr3D = function (x1, y1, x2, y2, z1, z2) {var a = x1 - x2;var b = y1 - y2;var c = z1 - z2;return a * a + b * b + c * c;}this.getDistance = function (x1, y1, x2, y2) {return Math.sqrt(top.getDistanceSqr(x1, y1, x2, y2));}this.getDistance3D = function (x1, y1, x2, y2, z1, z2) {return Math.sqrt(top.getDistanceSqr3D(x1, y1, x2, y2, z1, z2));}this.getAngle = function (x1, y1, x2, y2) {return Math.atan2(y2 - y1, x2 - x1);}this.normalize = function (x, y) {var len = Math.sqrt(x * x + y * y);return {x: x / len,y: y / len};}this.normalize3D = function (x, y, z) {var len = Math.sqrt(x * x + y * y + z * z);return {x: x / len,y: y / len,z: z / len};}this.normalize3DVector = function (x) {var len = Math.sqrt(x.x * x.x + x.y * x.y + x.z * x.z);return {x: x.x / len,y: x.y / len,z: x.z / len};}this.lengthVector = function (v) {return Math.sqrt(v.x * v.x + v.y * v.y);}this.length3DVector = function (v) {return Math.sqrt(v.x * v.x + v.y * v.y + v.z * v.z);}this.getLength = function () {var sum = 0;for (var i = 0; i x2 && x1 y2 && y1 < y2 + h2;}this.circlesIntersect = function (x1, y1, r1, x2, y2, r2) {return top.getDistance(x1, y1, x2, y2) (w2 / 2 + r1)) return false;if (circleDistanceY > (h2 / 2 + r1)) return false;if (circleDistanceX <= (w2 / 2)) return true;if (circleDistanceY <= (h2 / 2)) return true;var a = circleDistanceX - w2 / 2;var b = circleDistanceY - h2 / 2;var cornerDistance_sq = a * a + b * b;return cornerDistance_sq > 0;}this.randomArray = function (array) {return array[Math.random() * array.length >> 0];}this.randomColor = function (colorDepth) {if (colorDepth) {var colorStep = 256 / colorDepth;var r = Math.ceil((Math.random() * 256 >> 0) / colorStep) * colorStep;var g = Math.ceil((Math.random() * 256 >> 0) / colorStep) * colorStep;var b = Math.ceil((Math.random() * 256 >> 0) / colorStep) * colorStep;return "rgb(" + r + "," + g + "," + b + ")";}else {return "rgb(" + (Math.random() * 256 >> 0) + "," + (Math.random() * 256 >> 0) + "," + (Math.random() * 256 >> 0) + ")";}}this.create2DArray = function (w, h, value = () => 0) {var array = new Array(w);for (var i = 0; i < w; i++) {array[i] = new Array(h);for (var j = 0; j < h; j++) {array[i][j] = value(i, j);}}return array;}/****************** Export******************/this.canvasToURL = function () {return top.canvas.toDataURL();}this.canvasToImage = function () {var img = new Image();img.src = top.canvas.toDataURL();return img;}this.saveToFile = function (filename = "canvas.png") {var a = document.createElement("a");a.download = filename;a.href = top.canvas.toDataURL();a.click();}/****************** Cookies******************/this.setCookie = function (name, value, expireDays = 36500) {let d = new Date();d.setTime(d.getTime() + (expireDays * 24 * 60 * 60 * 1000));let expires = "expires=" + d.toUTCString();document.cookie = name + "=" + value + ";" + expires + ";path=/";}this.getCookie = function (name) {if (name.length == 0)return false;var cname = name + "=";var split = document.cookie.split(";");for (let i = 0; i 0) {return s.substr(index + cname.length);}}return false;}this.deleteCookie = function (name) {document.cookie = name + "=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/";}/****************** Misc.******************///Battery levelif (navigator.getBattery) {navigator.getBattery().then(function (battery) {battery.addEventListener('levelchange', function () {top.batteryLevel = battery.level * 100;});top.batteryLevel = battery.level * 100;});}this.getBatteryLevel = function () {return top.batteryLevel;}/****************** Functions******************/this.functions = [{ func: this.createCanvas, name: "createCanvas" },{ func: this.setSize, name: "setSize" },{ func: this.fillPageWithCanvas, name: "fillPageWithCanvas" },{ func: this.requestFullscreen, name: "requestFullscreen" },{ func: this.exitFullscreen, name: "exitFullscreen" },{ func: this.lockPointer, name: "lockPointer" },{ func: this.unlockPointer, name: "unlockPointer" },{ func: this.disableContextMenu, name: "disableContextMenu" },{ func: this.enableContextMenu, name: "enableContextMenu" },{ func: this.key, name: "key" },{ func: this.update, name: "update" },{ func: this.clearScreen, name: "clearScreen" },{ func: this.background, name: "background" },{ func: this.circle, name: "circle" },{ func: this.ring, name: "ring" },{ func: this.ellipse, name: "ellipse" },{ func: this.rectangle, name: "rectangle" },{ func: this.triangle, name: "triangle" },{ func: this.picture, name: "picture" },{ func: this.setLineCap, name: "setLineCap" },{ func: this.resetLineCap, name: "resetLineCap" },{ func: this.line, name: "line" },{ func: this.setFont, name: "setFont" },{ func: this.setTextAlign, name: "setTextAlign" },{ func: this.setTextXAlign, name: "setTextXAlign" },{ func: this.setTextYAlign, name: "setTextYAlign" },{ func: this.resetTextXAlign, name: "resetTextXAlign" },{ func: this.resetTextYAlign, name: "resetTextYAlign" },{ func: this.text, name: "text" },{ func: this.getPixelData, name: "getPixelData" },{ func: this.updatePixel, name: "updatePixel" },{ func: this.updatePixelIndex, name: "updatePixelIndex" },{ func: this.getPixel, name: "getPixel" },{ func: this.getPixelIndex, name: "getPixelIndex" },{ func: this.renderPixelData, name: "renderPixelData" },{ func: this.save, name: "save" },{ func: this.restore, name: "restore" },{ func: this.rotate, name: "rotate" },{ func: this.translate, name: "translate" },{ func: this.beginPath, name: "beginPath" },{ func: this.closePath, name: "closePath" },{ func: this.moveTo, name: "moveTo" },{ func: this.lineTo, name: "lineTo" },{ func: this.fill, name: "fill" },{ func: this.stroke, name: "stroke" },{ func: this.fillStyle, name: "fillStyle" },{ func: this.strokeStyle, name: "strokeStyle" },{ func: this.setLineWidth, name: "setLineWidth" },{ func: this.drawSphere, name: "drawSphere" },{ func: this.createSound, name: "createSound" },{ func: this.playSound, name: "playSound" },{ func: this.stopSound, name: "stopSound" },{ func: this.pauseSound, name: "pauseSound" },{ func: this.fadeOutSound, name: "fadeOutSound" },{ func: this.playTone, name: "playTone" },{ func: this.getDistanceSqr, name: "getDistanceSqr" },{ func: this.getDistance, name: "getDistance" },{ func: this.getDistanceSqr3D, name: "getDistanceSqr3D" },{ func: this.getDistance3D, name: "getDistance3D" },{ func: this.getAngle, name: "getAngle" },{ func: this.normalize, name: "normalize" },{ func: this.normalize3D, name: "normalize3D" },{ func: this.normalize3D, name: "normalize3DVector" },{ func: this.getLength, name: "getLength" },{ func: this.dot, name: "dot" },{ func: this.dot3D, name: "dot3D" },{ func: this.crossProduct3D, name: "crossProduct3D" },{ func: this.lengthVector, name: "lengthVector" },{ func: this.length3DVector, name: "length3DVector" },{ func: this.rectanglesIntersect, name: "rectanglesIntersect" },{ func: this.circlesIntersect, name: "circlesIntersect" },{ func: this.circleRectangleIntersect, name: "circleRectangleIntersect" },{ func: this.random, name: "random" },{ func: this.randomInt, name: "randomInt" },{ func: this.randomArray, name: "randomArray" },{ func: this.randomColor, name: "randomColor" },{ func: this.create2DArray, name: "create2DArray" },{ func: this.canvasToURL, name: "canvasToURL" },{ func: this.canvasToImage, name: "canvasToImage" },{ func: this.saveToFile, name: "saveToFile" },{ func: this.setCookie, name: "setCookie" },{ func: this.getCookie, name: "getCookie" },{ func: this.deleteCookie, name: "deleteCookie" },{ func: this.getBatteryLevel, name: "getBatteryLevel" }];this.variables = [{ variable: this.RadToDeg, name: "RadToDeg" },{ variable: this.DegToRad, name: "DegToRad" },{ variable: this.PI, name: "PI" },{ variable: this.TWO_PI, name: "TWO_PI" },{ variable: this.TAU, name: "TAU" }];this.makeFunctionsGlobal = function () {this.globalFunctions = true;this.functions.forEach(item => {window[item.name] = item.func;});this.variables.forEach(item => {window[item.name] = item.variable;});window.fps = this.fps;window.deltaTime = this.deltaTime;}/****************** Init******************/this.settings = settings;if (typeof this.settings === 'undefined') {//Create a canvas and make it fullscreenthis.canvas = this.createCanvas();this.fillPageWithCanvas();this.makeFunctionsGlobal();}else {if (typeof this.settings.canvas !== "undefined")this.canvas = this.settings.canvas;else {this.canvas = this.createCanvas();if (typeof this.settings.width === "undefined" &&typeof this.settings.height === "undefined")this.fillPageWithCanvas();if (typeof this.settings.globalFunctions === "undefined" || (typeof this.settings.globalFunctions !== "undefined" && this.settings.globalFunctions))this.makeFunctionsGlobal();}if (typeof this.settings.width !== "undefined") {this.width = this.settings.width;this.canvas.width = window.width = this.width;}if (typeof this.settings.height !== "undefined") {this.height = this.settings.height;this.canvas.height = window.height = this.height;}if (typeof this.settings.updateSizeOnResize !== "undefined") {this.updateSizeOnResize = this.settings.updateSizeOnResize;}}document.addEventListener("keydown", event => {this.keys[event.key] = this.keys[event.keyCode] = true;});document.addEventListener("keyup", event => {this.keys[event.key] = this.keys[event.keyCode] = false;});if (this.canvas) {this.ctx = this.canvas.getContext("2d");if (this.updateSizeOnResize) {window.addEventListener("resize", () => {this.setSize(window.innerWidth, window.innerHeight);});}this.mouse = { x: 0, y: 0, lastX: 0, lastY: 0, movementX: 0, movementY: 0, left: false, middle: false, right: false, down: false };this.touches = [];if (this.globalFunctions) {window.mouse = this.mouse;window.touches = this.touches;}this.canvas.addEventListener("mousemove", event => {let br = this.canvas.getBoundingClientRect();this.mouse.x = (event.clientX - br.left) / (br.width / this.width);this.mouse.y = (event.clientY - br.top) / (br.height / this.height);this.mouse.movementX = event.movementX;this.mouse.movementY = event.movementY;this.eventFunctions["mousemove"] && OnMouseMove(event);});this.canvas.addEventListener("mousedown", event => {let button = event.button;if (button {let button = event.button;if (button {this.eventFunctions["contextmenu"] && OnContextMenu(event);if (this.contextMenuDisabled) {event.preventDefault();return false;}return true;});//Touchthis.updateTouches = function () {let br = this.canvas.getBoundingClientRect();this.touches = [];for (let i = 0; i {if (this.disableScrollOnMobile)event.preventDefault();this.updateTouches();this.mouse.x = this.touches[0].x;this.mouse.y = this.touches[0].y;this.eventFunctions["touchmove"] && OnTouchMove(event);});this.canvas.addEventListener("touchend", event => {if (this.disableScrollOnMobile)event.preventDefault();this.touches = [];if (this.globalFunctions)window.touches = this.touches;this.mouse.left = false;this.eventFunctions["touchend"] && OnTouchEnd(event);});this.canvas.addEventListener("touchstart", event => {if (this.disableScrollOnMobile)event.preventDefault();this.updateTouches();this.mouse.x = this.touches[0].x;this.mouse.y = this.touches[0].y;this.mouse.left = true;if (!this.audioContext)this.audioContext = new (window.AudioContext || window.webkitAudioContext)();this.eventFunctions["touchstart"] && OnTouchStart(event);});}}script.js
var gc = new GameCanvas();var points = textToPoints("2023新年快乐", 20, "Anton");var titleParticles = [];var fireworks = [];var particles = [];var gravity = 0.1;setTimeout(function () {setInterval(function () {fireworks.push(new Firework(Math.random() * width, height, Math.random() - 0.5, -(Math.random() * 7 + 5)));}, 200);}, 2000);fireworks.push(new Firework(width / 2, height, 0, -9.5, 10, "gold", true));setInterval(function () {fireworks.push(new Firework(width / 2, height, 0, -9.5, 10, "gold", true));}, 5000);for (var i = 0; i < 250; i++) {circle(Math.random() * width,Math.random() * height,1,"rgb(200, 200, 200)");}var starImage = canvasToImage();background("black");loop();function loop() {gc.ctx.globalCompositeOperation = "source-over";background("rgba(0, 0, 0, 0.1)");gc.ctx.drawImage(starImage, 0, 0);gc.ctx.globalCompositeOperation = "lighter";for (var i = 0; i < fireworks.length; i++) {var firework = fireworks[i];firework.update();firework.render();}for (var i = 0; i < particles.length; i++) {var particle = particles[i];particle.update();particle.render();}for (var i = 0; i < titleParticles.length; i++) {var p = titleParticles[i];p.update();p.render();}requestAnimationFrame(loop);}function TitleParticle(x, y, vx, vy) {this.x = x;this.y = y;this.vx = vx;this.vy = vy;this.ay = 0.2;this.radius = 4;this.maxHealth = 200;this.health = 200;this.update = function () {this.x += this.vx;this.y += this.vy;this.vx *= 0.95;this.vy *= 0.95;this.vy += this.ay;this.ay *= 0.95;this.radius = (this.health / this.maxHealth) * 4;this.health--;if (this.health = 0) {fireworks.splice(fireworks.indexOf(this), 1);if (this.title) {var scale = 0.3;for (var i = 0; i > 0, Math.random() * 256 >> 0, Math.random() * 256 >> 0];for (var i = 0; i < Math.PI * 2; i += 0.1) {var power = (Math.random() + 0.5) * 4;var vx = Math.cos(i) * power;var vy = Math.sin(i) * power;particles.push(new Particle(this.x, this.y, vx, vy, Math.random() + 3, color));}}}}this.render = function () {circle(this.x, this.y, this.radius, this.color);}}function Particle(x, y, vx, vy, radius, color) {this.x = x;this.y = y;this.vx = vx;this.vy = vy;this.life = 100;this.color = color;this.radius = radius;this.update = function () {this.x += this.vx;this.y += this.vy;this.vy += gravity;this.vx *= 0.95;this.vy *= 0.95;this.life--;if (this.life (x + canvas.width * y) * 4;var threshold = 50;for (var i = 0; i threshold) {var p = {x: (i / 4) % canvas.width,y: (i / 4) / canvas.width >> 0};if (data[index(p.x + 1, p.y) + 3] < threshold ||data[index(p.x - 1, p.y) + 3] < threshold ||data[index(p.x, p.y + 1) + 3] < threshold ||data[index(p.x, p.y - 1) + 3] > 0});}}}return points;}
6.最后点击index.html文件，就可以看见以下烟花了。
注：左下角，可以点击播发音乐哦！