Ridimensionare HTML5 canvas finestra per adattarsi
https://stackoverflow.com/questions/1664785
-
12-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Come posso scalare automaticamente l'elemento <canvas> HTML5 per adattare la pagina?
Per esempio, posso ottenere un <div> in scala impostando le proprietà height e width al 100%, ma un <canvas> non scala, sarà vero?
Soluzione
Credo di aver trovato una soluzione elegante a questo:
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;
}
non ha avuto alcun impatto negativo grande prestazione per me, finora.
Altri suggerimenti
La seguente soluzione ha funzionato per me il migliore. Dal momento che sono relativamente nuovi per la codifica, mi piace avere la conferma visiva che qualcosa sta funzionando il modo in cui mi aspetto che. L'ho trovato al seguente sito: http://htmlcheats.com/html/resize-the-html5-canvas- dyamically /
Ecco il codice:
<!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>
Il bordo blu mostra il bordo della tela di ridimensionamento, ed è sempre lungo il bordo della finestra, visibile su tutti i 4 lati, che non era il caso per alcune delle altre risposte di cui sopra. Speranza che aiuta.
In pratica ciò che dovete fare è quello di legare l'evento onResize al vostro corpo, una volta che si cattura l'evento è sufficiente ridimensionare la tela utilizzando window.innerWidth e 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>
Impostazione coordinare la tela di larghezza e l'altezza dello spazio in base alle dimensioni del client browser richiede di ridimensionare e ridisegnare ogni volta che viene ridimensionato il browser.
Una soluzione meno complicata è quella di mantenere le dimensioni disegnabili di variabili JavaScript, ma impostare le dimensioni di tela sulla base del screen.width, dimensioni Screen.Height. Usare i CSS per adattarsi:
#containingDiv {
overflow: hidden;
}
#myCanvas {
position: absolute;
top: 0px;
left: 0px;
}
La finestra del browser in genere non potrà mai essere più grande dello schermo stesso (tranne quando si misreported la risoluzione dello schermo, come potrebbe essere con i non-matching due monitor), in modo che il fondo non mostrerà e le proporzioni dei pixel ha vinto' t vari. I pixel di tela sarà direttamente proporzionale alla risoluzione dello schermo a meno di usare i CSS per scalare la tela.
Un CSS puro approccio di aggiungere la soluzione di @jerseyboy sopra.
Funziona in Firefox (testato in V29), Chrome (testato in v34) e Internet Explorer (testato in 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>
Link alla esempio: http://temporaer.net/open /so/140502_canvas-fit-to-window.html
Ma attenzione, come stati @jerseyboy nel suo commento:
Ridimensionare tela con i CSS è fastidioso. Almeno su Chrome e Safari, del mouse / posizioni evento di tocco potranno non corrispondere 1: 1 con posizioni dei pixel di tela, e dovrete trasformare le coordinate sistemi.
A meno che non si desidera che la tela per upscale i dati delle immagini automaticamente (che è quello di James Black risposta parla, ma non sarà bella), si devono ridimensionare da soli e ridisegnare l'immagine. Centrare una tela
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);
Se il div completamente riempito la pagina web allora si può riempire quel div e in modo da avere una tela che riempie il div.
È possibile trovare questo interessante, in quanto potrebbe essere necessario utilizzare un CSS da usare percentuale, ma, dipende da quale browser che si sta utilizzando, e quanto è in accordo con le specifiche: http: //www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element
Le dimensioni intrinseche della tela elemento uguale alla dimensione spazio di coordinate, con i numeri interpretato in pixel CSS. Però, l'elemento può essere dimensionato in modo arbitrario da un foglio di stile. Durante il rendering, l'immagine viene scalata per adattarsi questo layout dimensioni.
Potrebbe essere necessario ottenere l'offsetWidth e l'altezza del div, o ottenere la finestra di altezza / larghezza e impostare che, come il valore del 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();
});
Se siete interessati a preservare rapporti di forma e di farlo in puro CSS (dato il rapporto di aspetto) si può fare qualcosa di simile qui di seguito. La chiave è la padding-bottom sull'elemento ::content che ridimensiona l'elemento container. Questo è relativo dimensioni alla larghezza del suo genitore, che è 100% per impostazione predefinita. Il rapporto specificato qui deve corrispondere con il rapporto dei formati sull'elemento 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();
});
}());
Usando jQuery è possibile monitorare il ridimensionamento della finestra e cambiare la larghezza della tela utilizzando jQuery pure.
Una cosa del genere
$( 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;">
Credo che questo è ciò che dobbiamo fare esattamente: 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);
In primo luogo, non è possibile utilizzare la larghezza e l'altezza attributi per cambiare le dimensioni (con il mio modo, almeno) perché che romperlo. Puoi farlo: 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
(prego di perdonarmi per eventuali errori di battitura, tendo a fare che un sacco)
sto usando sketch.js così dopo ho eseguito il comando init per la tela a cambiare la larghezza e l'altezza con jQuery. Basa le dimensioni sulla elemento genitore.
$ ( '# DrawCanvas'). Schizzo (). Attr ( 'altezza', $ ( '# DrawCanvas'). Genitore (). Altezza ()). Attr ( 'width', $ ( '# DrawCanvas' .) .parent () larghezza ());
