在圓柱體內用相機視圖繪製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？