Изменение размера буфера для холста html5 и webgl

Изменение размера буфера на холсте html5, т. Е. Canvas.width и canvas.height, похоже, изменяет размеры отображения холста на ios 8 и ios 9 при использовании webgl, в настольных браузерах, кажется, все в порядке: 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>

Я попытался настройки окна просмотра, но не повезло. Как сохранить размеры дисплея при изменении размера буфера на холсте?

источник

2015-12-25 NTN

вздох ... похоже на ошибку в Safari iOS. Filed a bug

Я еще не нашел прямого обходного пути. Одно дерьмовое обходное решение - изменить размер контейнера на мгновение.

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

Я думаю, что я не заметил эту проблему, так как я всегда делаю холст того же размера, что и на дисплее.

Есть ли причина, по которой ваш прецедент требует меньшего размера холста? Это явно ошибка в Safari. Просто спросите, можете ли вы его обойти.

источник

2015-12-25 07:30:28 gman

славный, размеры изображений, которые в последовательности иногда меняются, и поэтому для этого требуется холст, мне интересно, если вычисление мудрым этот метод лучше, чем повторное создание самого холста, который не должен запускать макет изменение. – NTN

Изменение размера буфера для холста html5 и webgl

ответ

Смежные вопросы