Using HTML5 canvas with the z axis? And how to move the canvas eye view?

How do you use the z axis when drawing and moving a model?

I have the following in my code currently:

var canvas = {
    obj: document.querySe开发者_如何学编程lector("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()

I know 3d can be used in the 2d canvas, for example Pre3D library

So what I am trying to do is have a model of a shop item and be able to pan and look around it in 3d... I still don't know how to move everything but for now I am asking for how to get the z axis there... Then I will ask for how to move the canvas...

---

If you want to draw 3D onto the Canvas element, you'll need to use something called WebGL which is basically done by calling canvas.getContext('3d'); (instead of '2d'). This has limited support in browsers right now (Google Chrome supports it). Have a look at some WebGL Tutorials http://learningwebgl.com/blog/?cat=5

It is possible to do basic 3D graphics with a standard 2d Canvas context, have a look at Opera's Wolfenstein 3D Canvas tutorial http://dev.opera.com/articles/view/creating-pseudo-3d-games-with-html-5-can-1/

But what you're asking for isn't trivial, and requires basic understanding of 3D graphics projection. You're not going to get an answer that involves posting some blob of code that you can simply copy 'n' paste.

---

A canvas is a two-dimensional surface. You would need to project the pixels of your three-dimensional models onto the surface. See http://en.wikipedia.org/wiki/Graphical_projection