如何在没有CSS3和WebGL的情况下向HTML5画布添加3D透视图

Question

I have this canvas here:

http://jsbin.com/soserubafe

and CODE javascript:

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

var w = canvas.width;
var h = canvas.height;


var cw=canvas.width;
var ch=canvas.height;
var fov = 250;

var pts = [{x:32,y:59.45},{x:136,y:66},{x:170,y:99},{x:171,y:114},{x:183,y:125},{x:218,y:144},{x:218,y:165},{x:226,y:193},{x:254,y:195},{x:283,y:195},{x:292,y:202},{x:325,y:213},{x:341,y:134},{x:397,y:245},{x:417,y:548}];

mimicSvg(pts);

function mimicSvg(pts){

  // make caps & joins round
  //ctx.lineCap='round';
  ctx.lineJoin='round';


  // draw the outside line with red shadow
  ctx.shadowColor='red';
  ctx.shadowBlur='2';
  ctx.lineWidth='40';
  ctx.scale(3,3);
  // draw multiple times to darken shadow
  drawPolyline(pts);
  drawPolyline(pts);
  drawPolyline(pts);

  // stop shadowing
  ctx.shadowColor='transparent';

  // refill the outside line with pink
  ctx.strokeStyle='yellowgreen';
  drawPolyline(pts);

  // draw the inside line
  ctx.lineWidth=2;
  ctx.strokeStyle='blue';
  drawPolyline(pts);

}

function drawPolyline(pts){
  ctx.beginPath();
  ctx.moveTo(pts[0].x,pts[0].y);
  for(var i=1;i<pts.length;i++){
    ctx.lineTo(pts[i].x,pts[i].y);
  }
  ctx.stroke();
}

and HTML:

<canvas id="canvas" width=1000 height=800></canvas>

How I can add 3d perspective view of this canvas witout using css3, webGL and similar.

Is it possible to add 3d view on 2d canvas?

Answer 1

If you can draw 2d and do math and combine the 2 you can create 3d image (not easy though)

A quick google let me to: http://www.kevs3d.co.uk/dev/phoria/ And this : Possible to run/create 3d animation without need for webgl in HTML5? (so duplicate)