html - 使用带 z 轴的 HTML5 Canvas ？以及如何移动 Canvas 的视线？

Question

绘制和移动模型时如何使用 z 轴？

目前我的代码中有以下内容:

var canvas = {
    obj: document.querySelector("canvas"),
    models: [{
        start: [10, 10, 10],
        end: [1, 20, 20],
        color: "silver",
    },{ start: [30, 30, 30],
        end: [10, 1, 10],
        color: "silver",
    },{ start: [60, 60, 60],
        end: [10, 10, 10],
        color: "silver",
    }],
    data: {},
    draw: (function () {
        if (this.obj.getContext) {
            this.data.ctx = this.obj.getContext('2d');
            this.models.forEach(function () {
                canvas.data.ctx.fillStyle = this.color;
                canvas.data.ctx.fillRect(this["start"][0], this["start"][1], this["end"][0], this["end"][1]);
            }));
        }
        return this
    })
}.draw()

我知道 3d 可以在 2d Canvas 中使用，例如 Pre3D library

所以我想做的是拥有一个商店商品的模型，并能够以 3d 方式平移和环顾四周……我仍然不知道如何移动所有东西，但现在我想知道如何在那里获得 z 轴...然后我将询问如何移动 Canvas ...

Answer 1

如果你想在 Canvas 元素上绘制 3D，你需要使用一种叫做 WebGL 的东西，它基本上是通过调用 canvas.getContext('3d');(而不是 '2d ').目前浏览器对它的支持有限(Google Chrome 支持)。查看一些 WebGL 教程 http://learningwebgl.com/blog/?cat=5

可以使用标准的 2d Canvas 上下文制作基本的 3D 图形，请查看 Opera 的 Wolfenstein 3D Canvas 教程 http://dev.opera.com/articles/view/creating-pseudo-3d-games-with-html-5-can-1/

但您的要求并非微不足道，需要对 3D 图形投影有基本的了解。您不会得到涉及发布一些您可以简单地复制“n”粘贴的代码块的答案。