Javascript Fabricjs-在一个文档中呈现多个画布

我在动态创建和设置画布背景时遇到问题。 我希望用户能够用文本和形状对图像进行注释，这就是我这样做的原因

我想知道为什么这段代码会产生这样的输出

想法

向端点发送get请求，该端点返回包含 图像URL

将该数据转换为javascript数组

根据上述长度动态创建fabric js画布 数组

使用图像的URL将画布背景设置为图像。（即，每个画布将具有从url获取的不同背景）

问题

只有最后一块画布有背景图像

代码

身体{
}
//按程序从给定源加载图像
//具有图像链接的端点
变量结束点=”http://localhost:8080/endpoint.php";
变量设置={
url:“http://localhost:8080/endpoint.php",
方法：“获取”，
};
//从端点获取图像数组
$.ajax（设置）.done（函数（图像\u json）{
var images=JSON.parse（images\u JSON）；
//按程序为html文档中的每个图像元素创建farbric.js画布，并将其背景设置为相应的图像。
//对于图像数组中的每个项目，创建一个fabric.js画布，其背景设置为图像本身
var canvas_数组=[]；
对于（变量i=0，len=images.length；i

为您创建只需复制代码，然后在本地使用您自己的图像即可在输出div中获得实际的完整结果（将生成图像）

let CANVAS_LIST=[]；
让imageList=[
'https://homepages.cae.wisc.edu/~ece533/images/planet.png'，
'https://homepages.cae.wisc.edu/~ece533/images/arctichare.png'，
'https://homepages.cae.wisc.edu/~ece533/images/baboon.png'，
]
imageList.forEach（元素=>{
让canvasElement=document.createElement（“canvas”）；
canvasElement.width='300'；
canvasElement.height='300'；
$（“#canvas_容器”）.append（canvasElement）；
让canvas=newfabric.canvas（canvasElement）；
//在这里添加示例文本。
canvas.add（new fabric.Text（'此文本已添加'）{
fontFamily：“美味500”，
颜色：“红色”，
左:10,，
排名：100
}));
//设置动态生成画布的背景
canvas.setBackgroundImage(
`${element}`，
canvas.renderal.bind（canvas），
{
背景:1,，
背景：错，
}
);
CANVAS_LIST.push（画布）；
});
设置超时（（）=>{
生成输出（）；
}, 3000);
函数generateOutput（）{
$（“#输出”）.empty（）；
CANVAS_LIST.forEach（CANVAS=>{
让图像=$（“

主体{}
显示输出
使用远程源代码是一项严格的要求。我尝试了几种方法，终于奏效了

代码


/c全局变量
var n_can_arr=[]；
var f_can_arr=[]；
var img_arr=[]；
//c程序加载来自给定源的图像
$.ajax({
url:“http://localhost:8080/endpoint.php",
键入：“获取”，
数据类型：“json”//c添加了数据类型
成功：功能（res）{
对于（var指数=0；指数{
//c对于普通画布数组的每个元素，创建一个fabric js画布并设置其背景
对于（变量i=0；i{
变量origX、origY、isDown、mode_rect、mode_uline、mode_free、指针；
//c设置按键侦听器
$（窗口）。在（“按键”上，（e）=>{
控制台日志（e.key）；
//c绘制矩形
如果（e.key==1）{
var-rect；
控制台日志（“框”）；
isDown=真；
无模式=错误；
模式=假；
mode_rect=真；
//c画布事件列表器
canvas.on（“鼠标：向下”，函数（o）{