html5 Canvas创建一个虚拟房间

Question

我正在寻找可以将两个图像混合在一起以创建动态环境的东西，请参见下面的示例： http://www.armstrong.com/flooring/design-a-room.asp?darScene=10&shortCode=&productCategory=

我能够解码该方法。 他们混合这些图像，例如： http://www.armstrong.com/ei2/data/assets/Robbins/0557AW148630.jpg http://www.armstrong.com/ei2/data/images/room-scenes/RSX3050L_2A.jpg

输出：http://www.armstrong.com/ei2/cgi-bin/Swatchbox.cgi?a=RenderImage%5Boutput=jpegstream%5D&v=1&i=data/images/room-scenes/RSEWE5205_2&o=data/out/&w=530&h=4444&Floor=~stitch~data/assets/Robbins/0557AW148630~%5BSpecialStitch=randomOffset%5D%5BPPF=75%5D

这将成为客户可以自定义的整体网站体验的一部分。感觉这需要后端脚本，但如果可能的话我想将它保留到php / javascript / jquery。

我发现只有许多解决方案，需要脚本在他们一边执行，这需要按月收费。这不是远程使用任何东西的选项。虽然如果产品的功能不限于另一台服务器，那么支付产品是一种选择。

Answer 1

好吧，如果你想做类似的事情，你可以去一些html5画布。

我做过非常相似的事情，我使用了JCanvas。 http://calebevans.me/projects/jcanvas/index.php 最好的部分是多层，以及更改和控制z-index的能力。 这样你就可以对不同的透明png进行分层，甚至可以移动它们。