需要在图片上移动上去加一层效果,类似http://3dcampus.lzjtu.edu.cn/ `<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--<img id="house" src="./pics/2.png">--> <!--<img id="house1" src="./pics/3.png">--> <canvas id="canvas"> 您的浏览器不支持canvas,请升级浏览器,显示此行文本。 </canvas> </body> <script src="javascript/omg.js"></script> <script> const stage = omg({ element: document.getElementById('canvas'), width: 500, height: 500, enableGlobalTranslate: true, enableGlobalScale: true, position: 'absolute', // 改变canvas.style.position images: [], // 预加载的图片列表,通常不用指定,因为使用接口绘制图片的时候,会自动预加载。 prepareImage: true, // 是否开启预加载图片 }); // 在init之前,你可以通过`stage.extend(yourShape)`拓展自定义的图形。 stage.init(); const rect = stage.graphs.rectangle({ x: 0, y: 0, width: 200, height: 200, opacity:0.3, color: "rgba(0,0,0,0.4)" }); const image = stage.graphs.image({ x: 0, y: 0, width: 200, height: 200, src: './pics/2.png' }).on('mouseenter', function(cur) { stage.addChild(rect); stage.redraw(); }).on('mouseleave',function () { stage.removeChild(rect); stage.redraw(); }); stage.addChild(image); stage.show(); </script> `