How to make cyan fireworks with black background in canvas
This time I will show you how to make cyan fireworks with a black background using canvas. What are the precautions for making cyan fireworks with a black background using canvas. Here is a practical case, let’s take a look.
<canvas></canvas><h1 id="span-span">201<span>8</span></h1>
html,body { padding: 0px; margin: 0px; background: #222; font-family: 'Karla', sans-serif; color: #FFF; height: 100%; overflow: hidden;
}h1 { z-index: 1000; position: fixed; top: 50%; left: 50%; transform: translateX(-50%) translateY(-100%); font-size: 58px; overflow: hidden;
}span { position: relative; display: inline-block; animation: drop 0.75s ease 0s;
}canvas { width: 100%; height: 100%;
}
@keyframes drop {
0% { transform: translateY(-100px); opacity: 0;
}
90% { opacity: 1; transform: translateY(10px);
}
100% { transform: translateY(0px);
}
}var ctx = document.querySelector('canvas').getContext('2d')ctx.canvas.width = window.innerWidthctx.canvas.height = window.innerHeightvar sparks = []var fireworks = []var i = 20;while (i--) { fireworks.push( new Firework(Math.random() * window.innerWidth, window.innerHeight * Math.random()) )}render()function render() { setTimeout(render, 1000 / 60) ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height) for (var firework of fireworks) { if (firework.dead) continue firework.move() firework.draw() } for (var spark of sparks) { if (spark.dead) continue spark.move() spark.draw() } if (Math.random() < 0.05) { fireworks.push(new Firework()) }}function Spark(x, y, color) { this.x = x this.y = y this.dir = Math.random() * (Math.PI * 2) this.dead = false this.color = color this.speed = Math.random() * 3 + 3; this.walker = new Walker({ radius: 20, speed: 0.25 }) this.gravity = 0.25 this.dur = this.speed / 0.1 this.move = function () { this.dur-- if (this.dur < 0) this.dead = true if (this.speed < 0) return if (this.speed > 0) this.speed -= 0.1 var walk = this.walker.step() this.x += Math.cos(this.dir + walk) * this.speed this.y += Math.sin(this.dir + walk) * this.speed this.y += this.gravity this.gravity += 0.05 } this.draw = function () { drawCircle(this.x, this.y, 3, this.color) }}function Firework(x, y) { this.xmove = new Walker({ radius: 10, speed: 0.5 }) this.x = x || Math.random() * ctx.canvas.width this.y = y || ctx.canvas.height this.height = Math.random() * ctx.canvas.height / 2 this.dead = false this.color = randomColor() this.move = function () { this.x += this.xmove.step() if (this.y > this.height) this.y -= 1; else this.burst() } this.draw = function () { drawCircle(this.x, this.y, 1, this.color) } this.burst = function () { this.dead = true var i = 100; while (i--) sparks.push(new Spark(this.x, this.y, this.color)) }}function drawCircle(x, y, radius, color) { color = color || '#FFF' ctx.fillStyle = color ctx.fillRect(x - radius / 2, y - radius / 2, radius, radius)}function randomColor() { return ['#6ae5ab', '#88e3b2', '#36b89b', '#7bd7ec', '#66cbe1'][Math.floor(Math.random() * 5)];}function Walker(options) { this.step = function () { this.direction = Math.sign(this.target) * this.speed this.value += this.direction this.target ? this.target -= this.direction : (this.value) ? (this.wander) ? this.target = this.newTarget() : this.target = -this.value : this.target = this.newTarget() return this.direction } this.newTarget = function () { return Math.round(Math.random() * (this.radius * 2) - this.radius) } this.start = 0 this.value = 0 this.radius = options.radius this.target = this.newTarget() this.direction = Math.sign(this.target) this.wander = options.wander this.speed = options.speed || 1}How to make red fireworks with black background in canvas
The above is the detailed content of How to make cyan fireworks with black background in canvas. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
The status bar at the bottom of Win11 has been changed to black style
Dec 31, 2023 pm 08:11 PM
The default bottom taskbar of win11 is light blue, which is more beautiful. However, some friends found that the bottom status bar of win11 suddenly turned black. This may be because the theme or background color has been changed. Just change it back. The status bar at the bottom of win11 turns black: 1. First, click on the bottom start menu and open "Settings" 2. Then enter the "Personalization" settings in the left column. 3. Then open the "Color" settings. 4. After entering, turn off the "transparency effect" (if it is turned on, our desktop is black and the status bar will be black) 5. If the wallpaper is not black, then change the selection mode to "light color". Can. 6. If you like other colors, you can freely choose among the theme colors.
Win11 new version of drawing: remove background with one click to realize cutout function
Sep 15, 2023 pm 10:53 PM
Microsoft invites WindowsInsider project members in the Canary and Dev channels to test and experience the new Paint application. The latest version number is 11.2306.30.0. The most noteworthy new feature of this version update is the one-click cutout function. Users only need to click once to automatically eliminate the background and highlight the main body of the picture, making it easier for users to perform subsequent operations. The whole step is very simple. The user imports the picture in the new layout application, and then clicks the "removebackground" button on the toolbar to delete the background in the picture. The user can also use a rectangle to select the area to remove the background.
How to replace all ppt backgrounds
Mar 25, 2024 pm 04:25 PM
PPT background replacement is an important operation that can quickly unify the visual style of the presentation. You can quickly replace the background of your entire presentation by modifying the slide master or using the Format Background feature. In addition, some PPT versions also provide a batch replacement function, which can easily replace the background of all slides. When replacing the background, you should pay attention to choosing a background that matches the theme of the presentation, and ensure that the background clarity and resolution meet the requirements.
Play ambient background sounds on iPhone to stay focused
Nov 29, 2023 pm 11:27 PM
On iPhone and iPad, one of the many accessibility features Apple has included is background sounds. These sounds are designed to help you stay focused, stay calm, and help minimize distractions when you're busy with something. The background sounds provided include balanced, bright and dark noises, as well as natural sounds such as ocean, rain and streams. All sounds can be set to play in the background to mask unwanted ambient or external noise, and sounds are blended into or hidden beneath other audio and system sounds. Enable Background Sound on iPhone and iPad The following steps describe how to enable background sound on iPhone and iPad running iOS15/iPadOS15 and later. on iPhone ori
The birth background and original intention of Go language
Apr 04, 2024 am 08:48 AM
The Go language was born at Google to solve the problems of complexity and insufficient concurrency support of C++. Its original intention is to create a simple, easy-to-learn, efficient concurrency, memory-safe, cross-platform language to improve programmer productivity, build reliable and scalable systems, and promote code porting and sharing.
Learn the canvas framework and explain the commonly used canvas framework in detail
Jan 17, 2024 am 11:03 AM
Explore the Canvas framework: To understand what are the commonly used Canvas frameworks, specific code examples are required. Introduction: Canvas is a drawing API provided in HTML5, through which we can achieve rich graphics and animation effects. In order to improve the efficiency and convenience of drawing, many developers have developed different Canvas frameworks. This article will introduce some commonly used Canvas frameworks and provide specific code examples to help readers gain a deeper understanding of how to use these frameworks. 1. EaselJS framework Ea
How to change the background color of photos on Meitu Xiuxiu
Apr 08, 2024 pm 03:56 PM
1. Open the Meitu Xiu Xiu software, select [Picture Beautification], and import photos from the album. 2. Click [Cutting] on the bottom toolbar and select the [Background Replacement] function. 3. In the [Background] option, select the desired background color from the solid color box, or upload a custom image. 4. After confirming the selection, click [Save] to complete the background color change.
uniapp implements how to use canvas to draw charts and animation effects
Oct 18, 2023 am 10:42 AM
How to use canvas to draw charts and animation effects in uniapp requires specific code examples 1. Introduction With the popularity of mobile devices, more and more applications need to display various charts and animation effects on the mobile terminal. As a cross-platform development framework based on Vue.js, uniapp provides the ability to use canvas to draw charts and animation effects. This article will introduce how uniapp uses canvas to achieve chart and animation effects, and give specific code examples. 2. canvas
