設置畫布大小的JavaScript

我在HTML中下面的代碼：設置畫布大小的JavaScript

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

我想要的，而不是指定width爲800，調用JavaScript函數getWidth()到例如獲得寬

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

什麼是正確的語法來做到這一點？因爲我在做什麼不行。

來源

2012-02-12 Kyriacos Kafas

也許這幫助： http://stackoverflow.com/questions/331052/how-to-resize-html-canvas-element – Alex 2012-02-12 18:40:06

你可以涉及到這個職位一個「適合屏幕」 http://stackoverflow.com/questions/1664785/html5-canvas-resize-to-fit-window – 2012-02-12 18:42:22

您的意思是'

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

來源

2012-02-12 18:38:51 bozdoz

我想設置畫布的寬度而不僅僅是獲得寬度 – 2012-02-12 18:43:04

查看更新的答案 – bozdoz 2012-02-12 18:56:58

@KyriacosKafas您應該選擇一個接受的答案。 :) – bozdoz 2014-03-18 19:14:49

您可以設置寬度是這樣的：

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

來源

2012-02-12 18:45:12

繪製函數不是此代碼的最佳位置。使用onresize沒有問題。 – 2016-02-18 14:22:03

亞這工作對我 – user889030 2017-04-12 09:47:25

-3

您也可以使用這個腳本，只是改變高度和寬度

<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");

來源

2014-12-20 04:46:12 Supriadi

什麼...？什麼...？什麼...？ – 2016-04-17 15:26:42

試試這個：

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（''）

適用於iframe和。

來源

2015-07-30 15:47:46

document.write（''） – 2015-07-30 15:48:37

試試這個：

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

來源

2016-08-18 00:23:05

設置畫布大小的JavaScript

回答

相關問題