2D画布内容的3D

Question

我有一张二维占用地图，如this（左侧）

到目前为止，它是在机器人网络界面的画布中逐个像素地绘制的内容。

我想要实现的是它的平移/倾斜/可旋转伪3D视图。每个占用的块得到一个矩形。所以像this。

我甚至不知道从哪里开始。这是纯粹的html5吗？ ......任何指导都会有所帮助。

关于我的设置的一些事实：

• 机器人的网络服务器是覆盆子pi上的烧瓶（python）服务器
• 客户端浏览器是Chrome（在Windows上）或iPad上的Safari
• 计算应在客户端进行

由于 罗伯特

Answer 1

  

这在纯html5中是否可行？

当然，因为3d只是一个2D投影。如果您需要javascript库，请检查WebGL和http://threejs.org/。

Answer 2

您可以通过绘制平面图的重复偏移版本来“伪造”第二个画布中的拉伸。

你可以稍微减轻角落效果。

演示：http://jsfiddle.net/m1erickson/7wxGS/

示例代码：

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    ctx.strokeStyle="gray";
    draw();
    ctx.strokeStyle="black"
    for(var i=.5;i<10;i+=.5){
        ctx.save();
        ctx.translate(-i,-i);
        draw();
        ctx.restore();
    }


    function draw(){
        ctx.beginPath();
        ctx.moveTo(100,100);
        ctx.lineTo(125,100);
        ctx.lineTo(125,125);
        ctx.lineTo(145,125);
        ctx.lineTo(145,145);
        ctx.lineTo(125,145);
        ctx.lineTo(125,175);
        ctx.lineTo(100,175);
        ctx.closePath();
        ctx.stroke();
        // exterior corners
        corner(100,100);
        corner(145,145);
        corner(125,175);
    }

    function corner(x,y){
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle="#ddd";
        ctx.fillRect(x,y,1,1);
        ctx.restore();
    }