如何在javascript中运行多个画布

Question

我有两个画布，现在我想在两个画布上放烟花。但它不起作用，只能在左侧画布或右侧画布上运行。

This is code jsfiddle

Answer 1

1）所有变量都是全局变量。这就是你不能使用多个对象的原因。

2）有些问题：

SCREEN_WIDTH = $('.fireworks').innerWidth(),
SCREEN_HEIGHT   = $('.fireworks').innerHeight(),

它仅从第一个元素获得宽度/高度。应该重写它以使用obj的父级。

SCREEN_WIDTH = $(canvas).parent().innerWidth();
SCREEN_HEIGHT = $(canvas).parent().innerHeight();

这是更新的小提琴（我刚刚为您的所有变量添加了var并将width / heigth的初始化移至init函数）：

https://jsfiddle.net/p6zsLo1p/3/