H5用canvas放烟花
很久很久以前的一个很流行的java Applet放烟花效果,当初移到android过,这次摸鱼时间翻译成js代码,用canvas实现
这么多年,终于能大致看懂这代码了,
已经实现透明效果,只需要给body弄个好看的背景图片就行,但需要主色为深色,看到的人谁有兴趣美化下,弄个背景加个声音啥的,不过没啥用就是的了,只是弄着好玩
谁要是弄得漂亮也给我看下,虽然我已经是个老头了,但也有一颗爱美的心
主要学到的是
1. js里面的各种Array,https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray
2. java中,像素数组一般用int数组,一个int表示一个像素, 而js中一般用Uint8数组,四个uint8表示一个像素,转换要考虑高低位的问题, 这里getPix setPix中的转换过程 可以省略掉,但年纪大了,懒了
【感谢GPT的大力相助】
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>烟花</title>
<style>
#mainCanvas{
width: 800px;
height: 600px;
background-color: rgba(255, 255, 255, 0);
position: absolute;
top: 0;
left: 0;
}
</style>
<script src="fireworks.js"></script>
</head>
<body style="background: #000000 ;">
<canvas ref="mainCanvas" id="mainCanvas" ></canvas>
<script>
var f=new Fireworks(mainCanvas);
</script>
</body>
</html>
Fireworks.js
class Fireworks{
constructor(canvas) {
//0xff000000前面的ff表示透明度,可以调小让背景图显示出来 不过这里没研究清楚
this.alpha = 0xFF000000;
this.fps = 12;
this.canvas = canvas;
this.width = 800;
this.height = 600;
this.size= this.width*this.height;
//减2行,以免超出
this.size2=this.size-this.width*2;
this.canvas.width = this.width;
this.canvas.height = this.height;
this.ctx = canvas.getContext('2d');
this.imageData = this.ctx.createImageData(this.width, this.height);
this.canvas.addEventListener("mousedown", this.onDown.bind(this));
//最多烟花数量,炸一次算50个,也就是同时最多10个烟花在,
this.bits=500;
//炸开后的烟花数量
this.bit_max=50;
//炸开角度,但具体影响还不清楚
this.ru = 50;
this.rv = 50;
//中心点
this.m_centerX = Math.floor(this.width / 2);
this.m_centerY = Math.floor(this.height / 2);
//实际图像数据 每四个位置表示一个像素 R G B A
this.data=new ArrayBuffer(this.width*this.height*4);
this.dataView = new DataView(this.data);
//烟花计算数据
this.bit_px = new Array(this.bits).fill(0);
this.bit_py = new Array(this.bits).fill(0);
this.bit_vx = new Array(this.bits).fill(0);
this.bit_vy = new Array(this.bits).fill(0);
this.bit_sx = new Int32Array(this.bits).fill(0);
this.bit_sy = new Int32Array(this.bits).fill(0);
this.bit_l = new Int32Array(this.bits).fill(0);
this.bit_f = new Int32Array(this.bits).fill(0);
this.bit_p = new Int32Array(this.bits).fill(0);
this.bit_c = new Int32Array(this.bits).fill(0);
this.m_centerX = Math.floor(this.width / 2);
this.m_centerY = Math.floor(this.height / 2);
this.initData();
this.calculate();
}
initData(){
//最开始的时候给弄透明了
for(var i=0;i<this.size;i++){
this.dataView.setUint32(i*4,0x00000000,true);
}
this.imageData.data.set(new Uint8ClampedArray(this.dataView.buffer));
}
onDown(event){
this.m_mouseX = event.offsetX;
this.m_mouseY = event.offsetY;
let k = Math.floor(Math.random() * 256);
let l = Math.floor(Math.random() * 256);
let i1 = Math.floor(Math.random() * 256);
let j1 = (k << 16) | (l << 8) | i1 | this.alpha;
let k1 = 0;
console.log(this.bits);
console.log(this.bit_max);
for (let l1 = 0; l1 < this.bits; l1++) {
if (this.bit_f[l1] !== 0) {
continue;
}
this.bit_px[l1] = this.m_mouseX;
this.bit_py[l1] = this.m_mouseY;
let d = Math.random() * 6.2800000000000002;
let d1 = Math.random();
this.bit_vx[l1] = Math.sin(d) * d1;
this.bit_vy[l1] = Math.cos(d) * d1;
this.bit_l[l1] = Math.floor(Math.random() * 100) + 100;
this.bit_p[l1] = Math.floor(Math.random() * 3);
this.bit_c[l1] = j1;
this.bit_sx[l1] = this.m_mouseX;
this.bit_sy[l1] = this.height - 5;
this.bit_f[l1] = 2;
if (++k1 === this.bit_max) {
break;
}
}
//这里播放开始声音
//这里尝试点击后修改一个像素点的颜色
/* let pix=this.getPix(y*this.width+x);
console.log(pix);
this.setPix(y*this.width+x,0xffff00f0);
this.imageData.data.set(new Uint8ClampedArray(this.dataView.buffer)); */
}
getPix(byteOffset){
//获取像素点
return this.dataView.getUint32(byteOffset*4, true);
}
setPix(byteOffset,val){
this.dataView.setUint32(byteOffset*4,val,true);
}
bit_set(x,y,v){
//设置像素点
this.setPix(y * this.width + x,v);
}
fade(){
//全图慢慢扩散和淡化
for (let j = 0; j < this.size2; j++) {
//取四个点
const k = this.getPix(j);
//最后会是黑色,所以如果一个点的值是黑色,就可以不运算了
if(k==this.alpha){
this.setPix(j,0x00000000);
continue;
}
if(k==0x00000000){
continue;
}
//右边
const l = this.getPix(j+1);
//下一行的点
const i1 = this.getPix(j + this.width);
//下一行右边
const j1 = this.getPix(j + this.width + 1);
let i = (k & 0xff0000) >> 16;
let k1 = ((((l & 0xff0000) >> 16) - i) * 50 >> 8) + i;
i = (k & 0xff00) >> 8;
let l1 = ((((l & 0xff00) >> 8) - i) * 50 >> 8) + i;
i = k & 0xff;
let i2 = (((l & 0xff) - i) * 50 >> 8) + i;
i = (i1 & 0xff0000) >> 16;
let j2 = ((((j1 & 0xff0000) >> 16) - i) * 50 >> 8) + i;
i = (i1 & 0xff00) >> 8;
let k2 = ((((j1 & 0xff00) >> 8) - i) * 50 >> 8) + i;
i = i1 & 0xff;
let l2 = (((j1 & 0xff) - i) * 50 >> 8) + i;
let i3 = ((j2 - k1) * 50 >> 8) + k1;
let j3 = ((k2 - l1) * 50 >> 8) + l1;
let k3 = ((l2 - i2) * 50 >> 8) + i2;
let val = (i3 << 16) | (j3 << 8) | k3 | this.alpha;
this.setPix(j,val);
}
}
//计算烟花
rend() {
let flag2 = false;
for (let k = 0; k < this.bits; k++) {
switch (this.bit_f[k]) {
default:
break;
case 1:
this.bit_vy[k] += Math.random() / 50;
this.bit_px[k] += this.bit_vx[k];
this.bit_py[k] += this.bit_vy[k];
this.bit_l[k]--;
if (this.bit_l[k] === 0 || this.bit_px[k] < 0.0 || this.bit_py[k] < 0.0 || this.bit_px[k] > this.width || this.bit_py[k] > this.height - 3) {
this.bit_c[k] = this.alpha;
this.bit_f[k] = 0;
} else if (this.bit_p[k] === 0) {
if (Math.floor(Math.random() * 2) === 0) {
this.bit_set(Math.floor(this.bit_px[k]), Math.floor(this.bit_py[k]), -1);
}
} else {
this.bit_set(Math.floor(this.bit_px[k]), Math.floor(this.bit_py[k]), this.bit_c[k]);
}
break;
case 2:
//这里是飞行速度,
this.bit_sy[k] -= 10;
if (this.bit_sy[k] <= this.bit_py[k]) {
this.bit_f[k] = 1;
flag2 = true;
}
if (Math.floor(Math.random() * 20) === 0) {
let i = Math.floor(Math.random() * 2);
let j = Math.floor(Math.random() * 5);
this.bit_set(this.bit_sx[k] + i, this.bit_sy[k] + j, -1);
}
break;
}
}
if (flag2 ) {
//播放爆炸声音
}
}
calculate(){
this.fade();
this.rend();
this.imageData.data.set(new Uint8ClampedArray(this.dataView.buffer));
this.ctx.putImageData(this.imageData,0,0);
setTimeout(()=>{this.calculate()},50);
}
}
原始java代码
import java.applet.Applet;
import java.applet.AudioClip;
import java.awt.*;
import java.awt.image.MemoryImageSource;
import java.util.Random; @SuppressWarnings("serial")
public class Test extends Applet implements Runnable {
public static void main(String[]args){
Test test=new Test();
test.init(); }
public Test() {
m_mouseX = 0;
m_mouseY = 0;
m_sleepTime = 5;
isError = false;
isInitialized = false;
rand = new Random();
bits = 50;
bit_px = new double[bits];
bit_py = new double[bits];
bit_vx = new double[bits];
bit_vy = new double[bits];
bit_sx = new int[bits];
bit_sy = new int[bits];
bit_l = new int[bits];
bit_f = new int[bits];
bit_p = new int[bits];
bit_c = new int[bits];
ru = 50;
rv = 50;
} public void init() {
String s ="50";
if (s != null)
bits = Integer.parseInt(s);
s = "30";
if (s != null)
bit_max = Integer.parseInt(s);
s = "20";
if (s != null)
ru = Integer.parseInt(s);
s = "100";
if (s != null)
rv = Integer.parseInt(s);
s ="0";
if (s != null)
bit_sound = Integer.parseInt(s);
m_nAppX = getSize().width;
m_nAppY = getSize().height;
m_centerX = m_nAppX / 2;
m_centerY = m_nAppY / 2;
m_mouseX = m_centerX;
m_mouseY = m_centerY;
resize(m_nAppX, m_nAppY);
pixls = m_nAppX * m_nAppY;
pixls2 = pixls - m_nAppX * 2;
pix0 = new int[pixls];
offImage = new MemoryImageSource(m_nAppX, m_nAppY, pix0, 0, m_nAppX);
offImage.setAnimated(true);
dbImg = createImage(offImage);
for (int i = 0; i < pixls; i++)
pix0[i] = 0xff000000; //sound1 = getAudioClip(getDocumentBase(), "firework.au");
//sound2 = getAudioClip(getDocumentBase(), "syu.au");
for (int j = 0; j < bits; j++)
bit_f[j] = 0; isInitialized = true;
start();
}
private boolean stop; public void run() {
while (!isInitialized)
try {
Thread.sleep(200L);
} catch (InterruptedException interruptedexception) {
}
do {
for (int j = 0; j < pixls2; j++) {
int k = pix0[j];
int l = pix0[j + 1];
int i1 = pix0[j + m_nAppX];
int j1 = pix0[j + m_nAppX + 1];
int i = (k & 0xff0000) >> 16;
int k1 = ((((l & 0xff0000) >> 16) - i) * ru >> 8) + i;
i = (k & 0xff00) >> 8;
int l1 = ((((l & 0xff00) >> 8) - i) * ru >> 8) + i;
i = k & 0xff;
int i2 = (((l & 0xff) - i) * ru >> 8) + i;
i = (i1 & 0xff0000) >> 16;
int j2 = ((((j1 & 0xff0000) >> 16) - i) * ru >> 8) + i;
i = (i1 & 0xff00) >> 8;
int k2 = ((((j1 & 0xff00) >> 8) - i) * ru >> 8) + i;
i = i1 & 0xff;
int l2 = (((j1 & 0xff) - i) * ru >> 8) + i;
int i3 = ((j2 - k1) * rv >> 8) + k1;
int j3 = ((k2 - l1) * rv >> 8) + l1;
int k3 = ((l2 - i2) * rv >> 8) + i2;
pix0[j] = i3 << 16 | j3 << 8 | k3 | 0xff000000;
} rend();
offImage.newPixels(0, 0, m_nAppX, m_nAppY);
try {
Thread.sleep(m_sleepTime);
} catch (InterruptedException interruptedexception1) {
}
} while (!stop);
} public void update(Graphics g) {
paint(g);
} public void paint(Graphics g) {
g.drawImage(dbImg, 0, 0, this);
} public void start() {
if (isError)
return;
isRunning = true;
if (runner == null) {
runner = new Thread(this);
runner.start();
}
} @SuppressWarnings("deprecation")
public void stop() {
if (runner != null) {
runner.stop();
runner = null;
}
} public boolean mouseMove(Event event, int i, int j) {
m_mouseX = i;
m_mouseY = j;
return true;
} public boolean mouseDown(Event event, int i, int j) {
m_mouseX = i;
m_mouseY = j;
int k = (int) (rand.nextDouble() * 256D);
int l = (int) (rand.nextDouble() * 256D);
int i1 = (int) (rand.nextDouble() * 256D);
int j1 = k << 16 | l << 8 | i1 | 0xff000000;
int k1 = 0;
for (int l1 = 0; l1 < bits; l1++) {
if (bit_f[l1] != 0)
continue;
bit_px[l1] = m_mouseX;
bit_py[l1] = m_mouseY;
double d = rand.nextDouble() * 6.2800000000000002D;
double d1 = rand.nextDouble();
bit_vx[l1] = Math.sin(d) * d1;
bit_vy[l1] = Math.cos(d) * d1;
bit_l[l1] = (int) (rand.nextDouble() * 100D) + 100;
bit_p[l1] = (int) (rand.nextDouble() * 3D);
bit_c[l1] = j1;
bit_sx[l1] = m_mouseX;
bit_sy[l1] = m_nAppY - 5;
bit_f[l1] = 2;
if (++k1 == bit_max)
break;
} if (bit_sound > 1)
sound2.play();
return true;
} public boolean mouseExit(Event event, int i, int j) {
m_mouseX = i;
m_mouseY = j;
return true;
} // (JAVA世纪网,java2000.net)
void rend() {
boolean flag2 = false;
for (int k = 0; k < bits; k++)
switch (bit_f[k]) {
default:
break; case 1: // '\001'
bit_vy[k] += rand.nextDouble() / 50D;
bit_px[k] += bit_vx[k];
bit_py[k] += bit_vy[k];
bit_l[k]--;
if (bit_l[k] == 0 || bit_px[k] < 0.0D || bit_py[k] < 0.0D || bit_px[k] > (double) m_nAppX
|| bit_py[k] > (double) (m_nAppY - 3)) {
bit_c[k] = 0xff000000;
bit_f[k] = 0;
} else if (bit_p[k] == 0) {
if ((int) (rand.nextDouble() * 2D) == 0)
bit_set((int) bit_px[k], (int) bit_py[k], -1);
} else {
bit_set((int) bit_px[k], (int) bit_py[k], bit_c[k]);
}
break; case 2: // '\002'
bit_sy[k] -= 5;
if ((double) bit_sy[k] <= bit_py[k]) {
bit_f[k] = 1;
flag2 = true;
}
if ((int) (rand.nextDouble() * 20D) == 0) {
int i = (int) (rand.nextDouble() * 2D);
int j = (int) (rand.nextDouble() * 5D);
bit_set(bit_sx[k] + i, bit_sy[k] + j, -1);
}
break;
} if (flag2 && bit_sound > 0)
sound1.play();
} void bit_set(int i, int j, int k) {
int l = i + j * m_nAppX;
pix0[l] = k;
} private int m_nAppX;
private int m_nAppY;
private int m_centerX;
private int m_centerY;
private int m_mouseX;
private int m_mouseY;
private int m_sleepTime;
private boolean isError;
boolean isRunning;
boolean isInitialized;
Thread runner;
int pix0[];
MemoryImageSource offImage;
Image dbImg;
int pixls;
int pixls2;
Random rand;
int bits;
double bit_px[];
double bit_py[];
double bit_vx[];
double bit_vy[];
int bit_sx[];
int bit_sy[];
int bit_l[];
int bit_f[];
int bit_p[];
int bit_c[];
int bit_max;
int bit_sound;
int ru;
int rv;
AudioClip sound1;
AudioClip sound2;
}
H5用canvas放烟花的更多相关文章
- Canvas 放烟花合集 -- 用粉丝头像做成烟花绽放🧨
"我对着烟花许愿,希望你永远在我身边" "凑不够满天星辰那就去看看烟花吧,人间烟火气,最抚凡人心" 小tips:喜欢的可以关注博主私信代码噢~ 也可以看看前面两 ...
- h5标签canvas关于getImageData跨域的问题
h5标签canvas关于getImageData跨域的问题 在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): ...
- 关于h5绘制canvas生成图片的注意点！
1.第一个是关于移动端自适应的问题: 答:如果是最后只要一张canvas生成的图片,而不是要绘制的canvas的图形,则不需要考虑自适应,绘制canvas的时候的宽高,可以直接写成UI提供的图的大小, ...
- win10 uwp 在 Canvas 放一个超过大小的元素会不会被裁剪
我尝试在一个宽度200高度200的 Canvas 放了一个宽度 300 高度 300 的元素,这个元素会不会被 Canvas 裁剪了? 经过我的测试,发现默认是不会被裁剪 火火问了我一个问题,如果有一 ...
- HTML5 Canvas绘图基本使用方法, H5使用Canvas绘图
Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的绘图功能(API),在网 ...
- H5使用Canvas绘图
一.什么是Canvas Canvas 是H5的一部分,允许脚本语言动态渲染图像.Canvas 定义一个区域,可以由html属性定义该区域的宽高,javascript代码可以访问该区域,通过一整套完整的 ...
- 关于H5的Canvas
1.什么是canvas? <canvas>标签是h5新增的,通过脚本(通常是js)来绘制图形,canvas只是一个图形容器,或者说是画布. canvas可以绘制路径.图形.字以及添加图像. ...
- JQuery和html+css实现鼠标点击放烟花
<!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content= ...
- 用H5的canvas做时钟
<!doctype html><html> <head> <meta charset="UTF-8"> <title>D ...
- H5 认识canvas
不同于SVG,HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径.不过,我们拥有众多路径生成的方法让复杂图形的绘制成为了可能. canvas提供了三 ...
随机推荐
- 2021-02-23：给定一个正数n，求n的裂开方法数。规定：后面的数不能比前面的数小 。比如4的裂开方法有： 1+1+1+1、1+1+2、1+3、2+2、4，5种，所以返回5。
2021-02-23:给定一个正数n,求n的裂开方法数.规定:后面的数不能比前面的数小 .比如4的裂开方法有: 1+1+1+1.1+1+2.1+3.2+2.4,5种,所以返回5. 福哥答案2021-0 ...
- 2022-01-18：将数组分成两个数组并最小化数组和的差。 给你一个长度为 2 * n 的整数数组。你需要将 nums 分成 两个 长度为 n 的数组，分别求出两个数组的和，并 最小化 两个数组和之
2022-01-18:将数组分成两个数组并最小化数组和的差. 给你一个长度为 2 * n 的整数数组.你需要将 nums 分成 两个 长度为 n 的数组,分别求出两个数组的和,并 最小化 两个数组和之 ...
- macbook苹果m1芯片训练机器学习、深度学习模型,resnet101在mnist手写数字识别上做加速，torch.device("mps")
apple的m1芯片比以往cpu芯片在机器学习加速上听说有15倍的提升,也就是可以使用apple mac训练深度学习pytorch模型!!!惊呆了 安装apple m1芯片版本的pytorch 然后使 ...
- Python相关镜像
Python相关镜像 (1) pip使用说明 对于Python开发用户来讲,我们会经常使用pip安装软件包.但国外的源下载速度实在太慢,浪费时间且经常出现下载后安装出错问题.所以把PIP安装源替换成国 ...
- 【Python】如何在FastAPI中使用UUID标记日志，以跟踪一个请求的完整生命周期
为什么要使用uuid标记日志? 在分布式系统中,一个请求可能会经过多个服务,每个服务都会生成自己的日志.如果我们只使用普通的日志记录,那么很难将这些日志串联在一起,以至难以跟踪一个请求的完整生命周期. ...
- C++面试八股文：指针占用多少个字节?
某日小二参加XXX科技公司的C++工程师开发岗位4面: 面试官:memset.memcpy和strcpy的区别是什么? 小二:memset用于将一块内存设置为特定的值, memcpy用于将一块内存从一 ...
- 基于 python3+nginx 的 Jupyter Notebook 服务端 ssl 访问
引言 Jupyter Notebook(原名 ipython)可是科学计算界的必备工具,友好的界面,方便的交互,支持 Markdown,集中的极客们想要的一切特点,同时又制作的如此优雅和精美,真是难能 ...
- Windows 10 开启子系统Ubuntu
卸载原有的wsl 分发子系统 # 查看已安装的wsl子系统 wsl --list # 依次删除wsl 子系统 wsl --unregister <子系统名称> 结果 安装子系统Ubuntu ...
- 全志G2D实现屏幕旋转，开机logo实现手动旋转。
产品设计出来之后啊,大家使用的时候觉得反过来使用更加便捷.但是屏幕显示是反的.那怎么办那????? 修改硬件费时费工,那能否软件实现那????? 如果纯软件使用那就太费系统资源了.于是就想到了使用全志 ...
- springboot使用Websocket写一个聊天室
1 <!--websocket 依赖--> 2 <dependency> 3 <groupId>org.springframework.boot</group ...