如何在没有 css3 和 webGL 的情况下将 3D 透视添加到 html5 画布

How to add 3d perspective to html5 canvas without css3 and webGL

本文关键字：透视 3D 添加 画布 html5 情况下 css3 webGL      更新时间：2023-09-26

我这里有这个画布：

http://jsbin.com/soserubafe

和代码 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();
}

和 HTML：

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

我如何使用 css3、webGL 和类似内容添加此画布智慧的 3d 透视图。

是否可以在 3d 画布上添加 2d 视图？

如果你能画2d并做数学运算，并结合2，你可以创建3d图像（虽然不容易）

快速谷歌让我：http://www.kevs3d.co.uk/dev/phoria/这个：可以在HTML5中运行/创建3D动画而无需webgl吗？（如此重复）

相关文章：