javascript - 在圆柱体内绘制一个带有摄像头视图的 html5 画布圆柱体

Question

我认为标题是不言自明的。我需要用圆柱体中心的相机视图构建 html5 画布圆柱体。在圆柱体的壁上，我需要构建类似图片的东西，圆柱体可以旋转和缩放。

如果有人对从哪里开始使用相机和气缸有一些指示，请提供帮助。

为了帮助您理解我的描述，我发布了一张图片 http://s21.postimg.org/fpnmukbef/inside_cilindre.jpg

Answer 1

我认为您必须处理 2d 图片并在最后一步转换所需的部分

要将好的部分转换为 3d，我认为您必须根据您选择的抛物线方程拉伸每个冒号

function getStretch(x,maxx)
{ /* here i choice :
     f(x) = (x*x)+3 for top
     f(x) = -(x*x)+1 for bottom
     when y >= 0 and y <= 4
     x >= -1 and x <= +1
  */

   // convert x ~ maxx to -1 ~ 1
   var ratio = 2/maxx; // -1 to 1 === 2
   x = x * ratio;
   x -= 1; // switch from 0 ~ 2 to -1 ~ 1

   var sizeY = 4;
   var y = -(x*x)+1; // bottom get y >= 0 and y <= 1 result, easier to compute
   y *= 2; // double to add up and bottom
   var colonHeight = sizeY - y;
   var colonRatio = colonHeight / sizeY;
   return colonRatio; // return the height ratio for this colon
}

101 个冒号视图的值：http: //jsfiddle.net/L9YgL/1/

var view_start_x = 200; // current view start at 200px from left source image
var view_size_x  = 399; // current view work on 400 px width

// get our stretch ratio for each colon
var stretch_values = [];
for(var x=0;x<=view_size_x;x++) stretch_values[x] = getStretch(x,view_size_x);

// now we need a function to get the colon height and position

var colonHeight = 400; // height of source image, and max height of out

function getColonInfo(x)
{ if(x < 0 || x > view_size_x) return {h:42,y:0};
  // compute current colon height
  var ratio  = stretch_values[x];
  var height = parseInt( colonHeight * ratio ,10);
  var posY = parseInt( (colonHeight - height)/2 ,10);
  return {h:height,y:posY};
}

// save this info for each out colon
var colon_info = [];
for(var x=0;x<=view_size_x;x++) colon_info[x] = getColonInfo(x);

// now a function to render a colon with a zoom

function renderColon(x,sourceX)
{    var info = colon_info[x];
     var originalHeight = colonHeight;
     var height = info.h;
     var y = info.y;
     // now do your reduce/blit magic here
     // render at "x","y" a colon with height of "height"
     // from source colon "sourceX" who get height of "originalHeight"

}

// and a function to iterate each colon and do the magic  

function my2dTo3d()
{
    for(x=0; x<=view_size_x; x++)
    {    var offset = x + view_start_x;
         renderColon(x,offset);
    }
}

好的，当然有更好的方法来做到这一点，我现在就在手边做，也许是 css3 ？