Question

更改html5画布缓冲区大小，即canvas.width和canvas.height似乎在使用webgl时更改ios 8和ios 9上的画布显示尺寸，在桌面浏览器中似乎没问题： https://jsfiddle.net/psqvur80/

<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>

我尝试了视口设置，但没有运气。如何在更改画布的缓冲区大小时保持显示尺寸？

Answer 1

叹息......看起来像iOS Safari中的一个错误。 Filed a bug

我还没有找到直接的解决方法。一个糟糕的解决方法是暂时改变容器的大小。

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

我想我没有注意到这个问题，因为我总是使画布与显示的尺寸相同。

您的用例是否需要画布更小？这显然是Safari中的一个错误。只是问你是否可以解决它

更改html5画布缓冲区大小和webgl

1 个答案: