Resize HTML5-Canvas-Fenster passt
https://stackoverflow.com/questions/1664785
-
12-09-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Wie kann ich automatisch das HTML5 <canvas> Element skalieren, um die Seite zu passen?
Zum Beispiel kann ich eine <div> maßstabs erhalten, indem die height und width Eigenschaften auf 100%, aber ein <canvas> nicht maßstäblich, wird es?
Lösung
Ich glaube, ich habe eine elegante Lösung dieses Problems gefunden:
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;
}
hat noch keine große negative Auswirkungen auf die Leistung nicht für mich hatte, so weit.
Andere Tipps
Die folgende Lösung funktionierte für mich das Beste. Da ich auf die Codierung relativ neu bin, wie ich eine visuelle Bestätigung haben, dass etwas die Art und Weise arbeitet ich es erwarte. Ich fand es auf der folgenden Website: http://htmlcheats.com/html/resize-the-html5-canvas- dyamically /
Hier ist der 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>
Die blaue Grenze zeigen Sie die Kante der Redimensionierung Leinwand, und ist immer am Rande des Fensters sichtbar an allen 4 Seiten, die für einige der anderen oben genannten Antworten nicht der Fall war. Hoffe, es hilft.
Im Grunde, was müssen Sie tun, ist das onresize Ereignis, um Ihren Körper zu binden, sobald Sie das Ereignis fangen Sie müssen nur die Leinwand Größe ändern mit window.innerWidth und 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>
Einstellen der Leinwand Raumbreite und Höhe des Browsers Kunden Dimensionen basierend koordinieren erfordert, dass Sie die Größe und neu zu zeichnen, wenn der Browser geändert wird.
Eine weniger gewundene Lösung ist, die ziehbar Dimensionen in Javascript Variablen zu halten, sondern setzte die Leinwand Dimensionen auf der Grundlage der screen.width, screen.height Dimensionen. Verwenden Sie CSS passen:
#containingDiv {
overflow: hidden;
}
#myCanvas {
position: absolute;
top: 0px;
left: 0px;
}
Die Browser-Fenster im Allgemeinen nicht immer größer als der Bildschirm selbst (es sei denn, die Bildschirmauflösung misreported wird, wie es mit nicht passenden Dual-Monitore sein könnte), so dass der Hintergrund nicht zeigen und Proportionen Pixel gewonnen‘ t variieren. Die Leinwand Pixel werden an die Bildschirmauflösung direkt proportional sein, wenn Sie CSS verwenden, um die Leinwand zu skalieren.
reine CSS Ansatz Zugabe zu Lösung von @jerseyboy oben.
Funktioniert in Firefox (in v29 getestet), Chrom (in v34 getestet) und Internet Explorer (in v11 getestet).
<!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 zum Beispiel: http://temporaer.net/open /so/140502_canvas-fit-to-window.html
Aber kümmern, wie @jerseyboy Zustände in seinem Kommentar:
Umskalierung Leinwand mit CSS ist mühsam. Zumindest auf Chrome und Safari, Maus / Berührungsereignis Positionen entsprechen nicht 1: 1 mit Leinwand Pixelpositionen, und Sie werden die Koordinaten zu transformieren Systeme.
Wenn Sie die Leinwand gehoben Ihre Bilddaten automatisch wollen (das ist, was James Black Antwort spricht, aber es wird nicht schön aussehen), haben Sie es selbst, um die Größe und das Bild neu zu zeichnen. eine Leinwand Zentrieren
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);
Wenn Ihr div vollständig die Webseite gefüllt, dann können Sie füllen das div und so eine Leinwand haben, die div füllt.
Sie können feststellen, dies interessant, da Sie eine CSS verwenden, müssen möglicherweise Prozentsatz zu verwenden, aber es hängt davon ab, welchen Browser Sie verwenden, und wie viel es in Übereinstimmung mit der Spezifikation: http: //www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element
Die inneren Dimensionen der Leinwand Element gleich der Größe der Koordinatenraum, mit den Zahlen in CSS Pixel interpretiert. Jedoch, Das Element kann beliebig dimensioniert sein, durch ein Stylesheet. Während der Wiedergabe das Bild wird verkleinert, um dieses Format zu passen Größe.
Sie müssen möglicherweise die offset und die Höhe des div zu bekommen, oder die Fensterhöhe / Breite erhalten und eingestellt, dass als der Pixelwert.
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();
});
Wenn Sie interessiert sind in Seitenverhältnisse zu erhalten und so in reiner CSS zu tun (da das Seitenverhältnis) Sie so etwas wie unten tun können. Der Schlüssel ist die padding-bottom auf dem ::content Element, das die container Elementgrößen. Dies ist so bemessen in Bezug auf seine Eltern Breite, die standardmäßig 100% ist. Das Verhältnis angegeben hat hier mit dem Verhältnis der Größen auf dem canvas Elemente übereinstimmen.
// 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();
});
}());
jQuery verwenden können Sie die Größe des Fensters verfolgen und die Breite der Leinwand ändern auch mit jQuery.
So etwas
$( 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;">
Ich denke, das ist das, was sollten wir genau das tun: 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);
Sie können zunächst nicht die Breite verwenden und Höhe Attribute die Größe zu ändern (mit meiner Art und Weise, zumindest), weil, dass es bricht. Du kannst das: 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
(Bitte vergib mir für irgendwelche Fehler, neige ich dazu zu tun, dass viel)
Ich verwende sketch.js so, nachdem ich den Befehl init für die Leinwand i die Breite und Höhe mit jquery ändern laufen. Sie stützt die Dimensionen auf dem übergeordneten Element.
$ ( '# DrawCanvas'). Skizzieren (). Attr ( 'height', $ ( '# DrawCanvas'). Parent (). Höhe ()). Attr ( 'width', $ ( '# DrawCanvas' .) .parent () Breite ());
