10
L'elemento HTML5 <canvas> non accetta le dimensioni relative (percentuale) per le sue proprietà width e height.Ridimensionamento relativo HTML Canvas
Quello che sto cercando di realizzare è avere il mio quadro relativo alla finestra. Questo è ciò che mi è venuta in mente finora, ma mi chiedo se c'è un modo migliore che è:
- Più semplice
- Non richiede avvolgendo il
<canvas>in un<div>. - Non dipende da jQuery (lo uso per ottenere la larghezza/altezza del div genitore)
- Idealmente, non ridisegnare il navigatore di ridimensionamento (ma credo che potrebbe essere un requisito)
Vedi sotto per il codice, che disegna un cerchio al centro dello schermo, il 40% di larghezza fino a un massimo di 400 pixel.
demo dal vivo: http://jsbin.com/elosil/2
Codice:
<!DOCTYPE html>
<html>
<head>
<title>Canvas of relative width</title>
<style>
body { margin: 0; padding: 0; background-color: #ccc; }
#relative { width: 40%; margin: 100px auto; height: 400px; border: solid 4px #999; background-color: White; }
</style>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
function draw() {
// draw a circle in the center of the canvas
var canvas = document.getElementById('canvas');
var relative = document.getElementById('relative');
canvas.width = $(relative).width();
canvas.height = $(relative).height();
var w = canvas.width;
var h = canvas.height;
var size = (w > h) ? h : w; // set the radius of the circle to be the lesser of the width or height;
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(w/2, h/2, size/2, 0, Math.PI * 2, false);
ctx.closePath();
ctx.fill();
}
$(function() {
$(window).resize(draw);
});
</script>
</head>
<body onload="draw()">
<div id="relative">
<canvas id="canvas"></canvas>
</div>
</body>
</html>
Grazie. È interessante notare che sembra * che * sia necessario avvolgere un 'canvas' in un' div' se si vuole centrarlo. 'margine: 0 auto' non sembra centrare una tela come fa un div. – Portman
@Portman No, puoi ancora. Ho appena dimenticato di mettere display: block nello stile canvas (il suo valore predefinito è inline-block, che non centra in questo modo). Risposta aggiornata con questa soluzione. – sethobrien