流星手機畫布不適合屏幕

我正在嘗試流星的meteor run android-device。我有以下簡單的HTML：流星手機畫布不適合屏幕

<body> 
    <canvas id='id'></canvas> 
</body>

和css：

html, body { 
    margin: 0; 
    padding: 0; 
} 

canvas { 
    width: 100vw; 
    height: 100vh; 
    position: absolute; 
}

這給出了這樣的輸出：

這不是我所期待的。我希望我的WebGl不會受到不同屏幕尺寸的拉伸。的WebGL代碼：

var canvas = this.find('#id'); 
if (!canvas) { 
    console.log('Strange Error occured'); 
    return; 
} 
var gl = canvas.getContext('webgl'); 
if (!gl) { 
    console.log("gl not supported"); 
    return; 
} 


gl.clearColor(0.4, 0.7, 0.9, 1.0); 
gl.clear(gl.COLOR_BUFFER_BIT); 
renderTriangle();

那麼，怎樣才能實現我，如果我畫的東西它就會沒有被相對我的屏幕尺寸或如此呈現，我怎麼能解決這個問題？注意：我不使用gl.viewport或任何相機轉換YET

來源

2016-08-05 greedsin

如何讀取一些WebGL tutorials？

注：我不使用gl.viewport或任何相機轉型YET

是不是正是你需要做什麼？

你可能會想要dynamically set the size of the canvas's drawingBuffer否則你會得到拉伸像素。

畫布有2種尺寸，＃1是他們drawingBuffer中的像素數量，＃2是他們顯示的尺寸。

改變大小後，您就需要調用gl.viewport

WebGL的座標始終+1 -1和其他一切是你，所以如果你不想讓你的三角伸展你需要看看在畫布上顯示的大小（canvas.clientWidth,canvas.clientHeight），然後使用它爲您的三角形選擇合適的剪輯空間座標。你怎麼做完全取決於你。大多數人通過將它們的頂點位置與其頂點着色器中的投影矩陣相乘來實現。

如果你在做3D，那麼你可以在perspective matrix的投影中設置你的方面（aspect = canvas.clientWidth/canvas.clientHeight）。對於2D，大多數人可能只是使用正交投影。將其設置爲顯示大小（left = -canvas.clientHeight/2, right = canvas.clientWidth/2, top = -canvas.clientHeight/2, bottom = canvas.clientHeight/2），而不是 drawingBuffer的大小也會讓你的東西不舒展。

來源

2016-08-05 23:55:35 gman

流星手機畫布不適合屏幕

回答

相關問題