在圆柱体内用相机视图绘制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？