Grâce aux méthodes scissor() et clear() on peut démontrer que le tampon (buffer) de dessin WebGL est affecté par la taille du canevas (l'élément HTML canvas).
La taille du premier canevas est définie avec la taille de l'élément, mis en forme, qui est déterminée par CSS. Pour cela, on affecte respectivement les valeurs clientWidth and clientHeight aux propriétés width et height.
Pour le deuxième canevas, on n'applique pas ce traitement, c'est donc les dimensions internes du canevas : width et height qui sont prises en compte. Celles-ci sont différentes des dimensions de l'élément canvas affiché dans le fenêtre du navigateur.
L'effet devient visible quand on utilise les méthodes scissor() et clear() pour dessiner un carré au centre du canevas en définissant sa position et sa taille en pixels. Dans le premier canevas, on obtient bien le bon résultat et dans le deuxième, on a la mauvaise forme, la mauvaise taille et la mauvaise position.
<p>On compare les deux canevas.</p>
<canvas
>Votre navigateur ne semble pas supporter l'élément HTML5 canvas.</canvas
>
<canvas
>Votre navigateur ne semble pas supporter l'élément HTML5 canvas.</canvas
>
body {
text-align: center;
}
canvas {
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];
// Ici on applique le traitement spécifique au premier
// canevas
firstCanvas.width = firstCanvas.clientWidth;
firstCanvas.height = firstCanvas.clientHeight;
// Ensuite on traite les deux canevas de la même façon
[firstCanvas, secondCanvas].forEach(function (canvas) {
var gl =
canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
if (!gl) {
document.querySelector("p").innerHTML =
"Ãchec de l'obtention du contexte WebGL. " +
"Votre navigateur peut ne pas supporter 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,
);
Le code source de cet exemple est également disponible sur GitHub.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4