This WebGL example explores the effect of setting (or not setting) the canvas size to its element size in CSS pixels, as it appears in the browser window.
采用
scissor()
and
clear()
we can demonstrate how the WebGL drawing buffer is affected by the size of the canvas.
The size of the first canvas is set to the styled
元素
size, determined by
CSS
. This is done by assigning the
width
and
height
properties of the canvas to the values of the
clientWidth
and
clientHeight
properties, respectively.
In contrast, no such assignment is done for the second canvas. The internal
width
and
height
properties of the canvas remain at default values, which are different than the actual size of the canvas
元素
in the browser window.
The effect is clearly visible when using
scissor()
and
clear()
to draw a square in the center of the canvas, by specifying its position and size in pixels. In the first canvas, we get the desired result. In the second, the square has the wrong shape, size, and position.
<p>Compare the two canvases.</p>
<canvas>Your browser does not seem to support
HTML5 canvas.</canvas>
<canvas>Your browser does not seem to support
HTML5 canvas.</canvas>
body {
text-align : center;
}
canvas {
display : inline-block;
width : 120px;
height : 80px;
margin : auto;
padding : 0;
border : none;
background-color : black;
}
window.addEventListener("load", function() {
"use strict"
var firstCanvas = document.getElementsByTagName("canvas")[0],
secondCanvas = document.getElementsByTagName("canvas")[1];
firstCanvas.width = firstCanvas.clientWidth;
firstCanvas.height = firstCanvas.clientHeight;
[firstCanvas, secondCanvas].forEach(function(canvas) {
var gl = canvas.getContext("webgl")
|| canvas.getContext("experimental-webgl");
if (!gl) {
document.querySelector("p").innerHTML =
"Failed to get WebGL context. "
+ "Your browser or device may not support WebGL.";
return;
}
gl.viewport(0, 0,
gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.enable(gl.SCISSOR_TEST);
gl.scissor(30, 10, 60, 60);
gl.clearColor(1.0, 1.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
});
}, false);
The source code of this example is also available on GitHub .