Redimensionner HTML5 pour adapter à la fenêtre
https://stackoverflow.com/questions/1664785
-
12-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Comment puis-je échelle automatiquement l'élément <canvas> HTML5 pour adapter la page?
Par exemple, je peux obtenir un <div> à l'échelle en définissant les propriétés de height et width à 100%, mais un <canvas> ne sera pas l'échelle, il sera?
La solution
Je crois avoir trouvé une solution élégante à ceci:
JavaScript
/* important! for alignment, you should make things
* relative to the canvas' current width/height.
*/
function draw() {
var ctx = (a canvas context);
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
//...drawing code...
}
CSS
html, body {
width: 100%;
height: 100%;
margin: 0;
}
n'a pas eu d'impact négatif important de performance pour moi, jusqu'à présent.
Autres conseils
La solution suivante a fonctionné pour moi le meilleur. Depuis que je suis relativement nouveau au codage, je voudrais avoir une confirmation visuelle que quelque chose fonctionne comme je l'attends à. Je l'ai trouvé sur le site suivant: http://htmlcheats.com/html/resize-the-html5-canvas- dyamically /
Voici le code:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Resize HTML5 canvas dynamically | www.htmlcheats.com</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px;
border: 0;
overflow: hidden; /* Disable scrollbars */
display: block; /* No floating content on sides */
}
</style>
</head>
<body>
<canvas id='c' style='position:absolute; left:0px; top:0px;'>
</canvas>
<script>
(function() {
var
// Obtain a reference to the canvas element using its id.
htmlCanvas = document.getElementById('c'),
// Obtain a graphics context on the canvas element for drawing.
context = htmlCanvas.getContext('2d');
// Start listening to resize events and draw canvas.
initialize();
function initialize() {
// Register an event listener to call the resizeCanvas() function
// each time the window is resized.
window.addEventListener('resize', resizeCanvas, false);
// Draw canvas border for the first time.
resizeCanvas();
}
// Display custom canvas. In this case it's a blue, 5 pixel
// border that resizes along with the browser window.
function redraw() {
context.strokeStyle = 'blue';
context.lineWidth = '5';
context.strokeRect(0, 0, window.innerWidth, window.innerHeight);
}
// Runs each time the DOM window resize event fires.
// Resets the canvas dimensions to match window,
// then draws the new borders accordingly.
function resizeCanvas() {
htmlCanvas.width = window.innerWidth;
htmlCanvas.height = window.innerHeight;
redraw();
}
})();
</script>
</body>
</html>
La bordure bleue montre le bord de la toile de redimensionnement, et est toujours le long du bord de la fenêtre, visible sur les 4 côtés, qui n'a pas été le cas pour certains des autres réponses ci-dessus. Espérons que cela aide.
En fait ce que vous avez à faire est de lier l'événement onresize à votre corps, une fois que vous prenez le cas où vous avez juste besoin de redimensionner la toile en utilisant window.innerWidth et window.innerHeight.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Canvas Resize</title>
<script type="text/javascript">
function resize_canvas(){
canvas = document.getElementById("canvas");
if (canvas.width < window.innerWidth)
{
canvas.width = window.innerWidth;
}
if (canvas.height < window.innerHeight)
{
canvas.height = window.innerHeight;
}
}
</script>
</head>
<body onresize="resize_canvas()">
<canvas id="canvas">Your browser doesn't support canvas</canvas>
</body>
</html>
Réglage de la toile de coordonnées largeur de l'espace et la hauteur en fonction des dimensions du client du navigateur vous oblige à redimensionner et redessiner chaque fois que le navigateur est redimensionnée.
Une solution moins alambiquée est de maintenir les dimensions étirables dans les variables Javascript, mais définir les dimensions de la toile sur la base screen.width, dimensions screen.height. Utilisez CSS pour adapter:
#containingDiv {
overflow: hidden;
}
#myCanvas {
position: absolute;
top: 0px;
left: 0px;
}
La fenêtre du navigateur en général ne sera jamais plus grand que l'écran lui-même (sauf si la résolution d'écran est fallacieuse, car il pourrait être avec deux moniteurs non-appariement), de sorte que le fond ne sera pas affiché et les proportions de pixels gagné » t varient. Les pixels de toile sera directement proportionnelle à la résolution de l'écran, sauf si vous utilisez CSS à l'échelle de la toile.
CSS pur approche ajouter à la solution de @jerseyboy ci-dessus.
Fonctionne dans Firefox (testé v29), Chrome (testé V34) et Internet Explorer (testé v11).
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
canvas {
background-color: #ccc;
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}
</script>
</body>
</html>
Lien vers l'exemple: http://temporaer.net/open /so/140502_canvas-fit-to-window.html
Mais attention, comme les Etats @jerseyboy dans son commentaire:
Redimensionner toile avec CSS est gênant. Au moins sur Chrome et Safari, les positions souris / événement tactile ne correspondront pas 1: 1 avec toile positions de pixels, et vous aurez à transformer les coordonnées systèmes.
Sauf si vous voulez la toile pour vos données haut de gamme d'image automatiquement (c'est ce que les pourparlers de réponse de James Black A propos, mais il ne sera pas assez), vous devez redimensionner vous-même et redessiner l'image. Centrer une toile
function resize() {
var canvas = document.getElementById('game');
var canvasRatio = canvas.height / canvas.width;
var windowRatio = window.innerHeight / window.innerWidth;
var width;
var height;
if (windowRatio < canvasRatio) {
height = window.innerHeight;
width = height / canvasRatio;
} else {
width = window.innerWidth;
height = width * canvasRatio;
}
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
};
window.addEventListener('resize', resize, false);
Si votre div rempli complètement la page Web que vous pouvez remplir cette div et ont donc une toile qui remplit la div.
Vous pouvez trouver cela intéressant, que vous devrez peut-être utiliser un pourcentage css à utiliser, mais cela dépend du navigateur que vous utilisez, et combien il est en accord avec les spécifications: http: //www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element
Les dimensions intrinsèques de la toile élément égal à la taille de la espace de coordonnées, les numéros interprété en pixels CSS. cependant, l'élément peut être dimensionné de manière arbitraire par une feuille de style. Pendant le rendu, l'image est mise à l'échelle pour adapter cette mise en page la taille.
Vous devrez peut-être obtenir le offsetWidth et la hauteur de la div, ou obtenir la hauteur fenêtre / largeur et définir que la valeur de pixel.
CSS
body { margin: 0; }
canvas { display: block; }
JavaScript
window.addEventListener("load", function()
{
var canvas = document.createElement('canvas'); document.body.appendChild(canvas);
var context = canvas.getContext('2d');
function draw()
{
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.moveTo(0, 0); context.lineTo(canvas.width, canvas.height);
context.moveTo(canvas.width, 0); context.lineTo(0, canvas.height);
context.stroke();
}
function resize()
{
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
draw();
}
window.addEventListener("resize", resize);
resize();
});
Si vous êtes intéressé à préserver des rapports d'aspect et de le faire en CSS pur (compte tenu du ratio d'aspect), vous pouvez faire quelque chose comme ci-dessous. La clé est le padding-bottom sur l'élément ::content que l'élément de taille container. Ceci est dimensionné par rapport à la largeur de son parent, qui est 100% par défaut. Le ratio spécifié ici doit correspondre avec le rapport des tailles sur l'élément canvas.
// Javascript
var canvas = document.querySelector('canvas'),
context = canvas.getContext('2d');
context.fillStyle = '#ff0000';
context.fillRect(500, 200, 200, 200);
context.fillStyle = '#000000';
context.font = '30px serif';
context.fillText('This is some text that should not be distorted, just scaled', 10, 40);/*CSS*/
.container {
position: relative;
background-color: green;
}
.container::after {
content: ' ';
display: block;
padding: 0 0 50%;
}
.wrapper {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
canvas {
width: 100%;
height: 100%;
}<!-- HTML -->
<div class=container>
<div class=wrapper>
<canvas width=1200 height=600></canvas>
</div>
</div>
(function() {
// get viewport size
getViewportSize = function() {
return {
height: window.innerHeight,
width: window.innerWidth
};
};
// update canvas size
updateSizes = function() {
var viewportSize = getViewportSize();
$('#myCanvas').width(viewportSize.width).height(viewportSize.height);
$('#myCanvas').attr('width', viewportSize.width).attr('height', viewportSize.height);
};
// run on load
updateSizes();
// handle window resizing
$(window).on('resize', function() {
updateSizes();
});
}());
En utilisant jQuery vous pouvez suivre le redimensionnement de la fenêtre et changer la largeur de votre toile en utilisant jQuery ainsi.
Quelque chose comme ça
$( window ).resize(function() {
$("#myCanvas").width($( window ).width())
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Je pense que c'est ce que nous devrions faire exactement: http://www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games/
function resizeGame() {
var gameArea = document.getElementById('gameArea');
var widthToHeight = 4 / 3;
var newWidth = window.innerWidth;
var newHeight = window.innerHeight;
var newWidthToHeight = newWidth / newHeight;
if (newWidthToHeight > widthToHeight) {
newWidth = newHeight * widthToHeight;
gameArea.style.height = newHeight + 'px';
gameArea.style.width = newWidth + 'px';
} else {
newHeight = newWidth / widthToHeight;
gameArea.style.width = newWidth + 'px';
gameArea.style.height = newHeight + 'px';
}
gameArea.style.marginTop = (-newHeight / 2) + 'px';
gameArea.style.marginLeft = (-newWidth / 2) + 'px';
var gameCanvas = document.getElementById('gameCanvas');
gameCanvas.width = newWidth;
gameCanvas.height = newHeight;
}
window.addEventListener('resize', resizeGame, false);
window.addEventListener('orientationchange', resizeGame, false);
D'abord, vous ne pouvez pas utiliser les attributs de largeur et la hauteur pour changer la taille (avec mon chemin, au moins) parce que cela va casser. Tu peux le faire: HTML:
<canvas id = 'myCanvas'></canvas>
JS:
var canvas = document.getElementById('myCanvas');
var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;
canvas.style.position = 'absolute';
//Or set the position to absolute using CSS
(S'il vous plaît pardonnez-moi pour les fautes de frappe, je tends à faire beaucoup)
J'utilise sketch.js donc après je lance la commande init pour la toile je change la largeur et la hauteur avec jquery. Elle se fonde sur les dimensions de l'élément parent.
$ ( '# DrawCanvas'). Sketch (). Attr ( 'hauteur', $ ( '# DrawCanvas'). Parent (). Hauteur ()). Attr ( 'width', $ ( '# DrawCanvas' ) .parent () largeur ());.
