2012-02-12 11 views
29

Ho il seguente codice in html:Set formato su tela utilizzando JavaScript

<canvas id="myCanvas" width =800 height=800> 

voglio, invece di specificare la width come 800, per chiamare la funzione JavaScript getWidth() per ottenere la larghezza per esempio

<canvas id="myCanvas" width =getWidth() height=800> 

Qual è la sintassi corretta per farlo? Perché quello che sto facendo non funziona.

+0

Forse questo aiuto: http://stackoverflow.com/questions/331052/how-to-resize-html-canvas-element – Alex

+0

è possibile riferirsi a questo post per un "adattamento allo schermo" http://stackoverflow.com/questions/1664785/html5-canvas-resize-to-fit-window –

+0

Intendevi ' 'e' '. È un errore di battitura o un errore nel codice? –

risposta

21
function setWidth(width) { 
    var canvas = document.getElementById("myCanvas"); 
    canvas.width = width; 
} 
+0

Voglio impostare la larghezza della tela non solo ottenere la larghezza –

+0

vedere la risposta aggiornata – bozdoz

+1

@KyriacosKafas Dovresti scegliere una risposta accettata. :) – bozdoz

40

È possibile impostare la larghezza in questo modo:

function draw() { 
    var ctx = (a canvas context); 
    ctx.canvas.width = window.innerWidth; 
    ctx.canvas.height = window.innerHeight; 
    //...drawing code... 
} 
+3

La funzione di disegno non è il posto migliore per questo codice. Utilizzare onresize senza problemi. –

+0

ya questo ha funzionato per me – user889030

-3

È inoltre possibile utilizzare questo script, basta cambiare l'altezza e la larghezza

<canvas id="Canvas01" width="500" height="400" style="border:2px solid #FF9933; margin-left:10px; margin-top:10px;"></canvas> 

    <script> 
     var canvas = document.getElementById("Canvas01"); 
     var ctx = canvas.getContext("2d"); 
+2

cosa ...? che cosa...? che cosa...? –

0

Prova questa:

var w = window, 
d = document, 
e = d.documentElement, 
g = d.getElementsByTagName('body')[0], 
xS = w.innerWidth || e.clientWidth || g.clientWidth, 
yS = w.innerHeight|| e.clientHeight|| g.clientHeight; 
alert(xS + ' × ' + yS); 

document.write ('')

funziona per iframe e bene.

+0

document.write ('') –

4

Prova questo:

var setCanvasSize = function() { 
canvas.width = window.innerWidth; 
canvas.height = window.innerHeight; 
}