更改html5畫布緩衝區大小和webgl

更改html5畫布緩衝區大小即canvas.width和canvas.height在使用webgl時似乎會更改ios 8和ios 9上的畫布顯示大小，但在桌面瀏覽器中似乎正常： https://jsfiddle.net/psqvur80/更改html5畫布緩衝區大小和webgl

<html> 
<head> 

</head> 
<body> 
<div id="iv" style="width:400px;height:400px;"></div> 
<script type="text/javascript"> 
    var iv = document.getElementById('iv'); 

    var test = function(){ 
     this.canvas = document.createElement('canvas'); 
     this.canvas.style.width = '100%'; 
     this.canvas.style.height = '100%'; 
     this.canvas.width = 200; 
     this.canvas.height = 200; 
     this.canvas.style.borderColor = 'red'; 
     this.canvas.style.borderWidth = '2px'; 
     this.canvas.style.borderStyle = 'solid'; 
     iv.appendChild(this.canvas); 
     this.initWebGL(); 

    } 

    test.prototype.initWebGL = function() { 
     // attempt to get a webgl context 
     try { 
      var gl = this.gl = this.canvas.getContext('webgl') || this.canvas.getContext('experimental-webgl'); 
     } catch (e) { 
      return false; 
     } 


    }; 

    var testcase = new test(); 

    testcase.gl.viewport(0, 0, 200, 200); 
    testcase.gl.clearColor(0, 0.5, 0, 1); 
    testcase.gl.clear(testcase.gl.COLOR_BUFFER_BIT); 

    setTimeout(function(){ 
     //console.log('resize'); 
     testcase.gl.viewport(0, 0, 100, 100); 
     testcase.canvas.width = 100; 
     testcase.canvas.height = 100; 

     testcase.gl.clearColor(0, 0.5, 0, 1); 
     testcase.gl.clear(testcase.gl.COLOR_BUFFER_BIT); 
    }, 2000); 



</script>    
</body>

我試過視口設置，但沒有運氣。我如何才能讓顯示dimentions同時改變畫布的緩衝區的大小？

來源

2015-12-25 NTN

嘆息......看起來像在iOS的Safari瀏覽器中的錯誤。 Filed a bug

我還沒有找到一個直接的解決方法呢。一個糟糕的解決辦法是改變容器的大小了一會兒。

iv.style.width = "401px"; 
requestAnimationFrame(function() { 
    iv.style.width = "400px"; 
});

我想我沒有注意到這個問題，因爲我總是使畫布的尺寸與其顯示的尺寸相同。

是有一些原因，你使用的情況下，需要在畫布上要小一些？這顯然是Safari中的一個錯誤。只是問，如果你能解決它

來源

2015-12-25 07:30:28 gman

好一個，圖像dimentions在序列有時會發生變化，所以畫布需要，我不知道如果計算明智這種方法比重新創建畫布本身不應觸發佈局更好更改。 – NTN

更改html5畫布緩衝區大小和webgl

回答

相關問題