draw 3D object - Javascript Canvas

Javascript examples for Canvas:Draw

  1. HOME
  2. Javascript
  3. Canvas
  4. Draw

Description

draw 3D object

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//w  w  w. j a v  a  2s  .  c  o  m
var ctx = $("canvas").get(0).getContext("2d");
var point = function(x, y, z) {
    return {
        x: x,
        y: y,
        z: z
    };
};
var project = function(p) {
    return {
        x: p.x + p.z,
        y: p.y - p.z
    };
};
var a = 50, b = 100, c = 0,
    d = 200, e = 250, f = 50;
var points = [
    point(a, b, c),
    point(d, b, c),
    point(d, e, c),
    point(a, e, c),
    point(a, b, f),
    point(d, b, f),
    point(d, e, f),
    point(a, e, f)
].map(project);
var lines = [
    [0, 1], [1, 2], [2, 3], [3, 0],  // bottom plane lines
    [4, 5], [5, 6], [6, 7], [7, 4],  // top plane lines
    [0, 4], [1, 5], [2, 6], [3, 7]   // vertical lines
];
lines.forEach(function(pair) {
    var p = points[ pair[0] ];
    var q = points[ pair[1] ];
    ctx.moveTo(p.x, p.y);
    ctx.lineTo(q.x, q.y);
});
ctx.stroke();
    });

      </script> 
   </head> 
   <body> 
      <canvas width="400" height="400"></canvas>  
   </body>
</html>

Related Tutorials