HTML5畫布全尺寸
[英]HTML5 Canvas Full Size
問題描述
我正在嘗試通過以下代碼使html5 canvas全尺寸。 我知道使用JavaScript還有其他方法，但是這有什么問題呢？
<head>
<title>Canvas_dot</title>
<meta charset="utf-8">
<style>
#mycanvas{
background-color : #d3d3d3;
}
</style>
</head>
<body >
<canvas id=myCanvas width=window.innerWidth height=window.innerHeight ></canvas>
</body>
5 個解決方案
解決方案1
1 已采納 2015-06-01 11:37:20
使用javascript，請執行以下操作：
var canvas = document.getElementById("myCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight
解決方案2
0 2015-06-01 11:45:11
如果您只需要一種解決方案，則可以通過這種方式實際解決
#mycanvas{
background-color : #d3d3d3;
width : 100%;
height : 100%;
}
解決方案3
0 2015-06-01 12:04:32
您的代碼的問題是window.innerWidth實際上是Javascript。 Javascript調用需要在它們周圍有一個腳本標簽，才能被識別為Javascript。
解決方案4
0 2015-06-01 12:14:37
沒有JS的情況下，更簡單，更干凈的解決方案。 只需使用：
body{
width:100%;
height:100%;
}
#mycanvas{
width:100%;
height:100%;
background-color : #d3d3d3;
}
解決方案5
0
有幾個原因導致此方法不起作用：
JavaScript是用來操縱DOM的。 為此，必須先存在DOM，然后才能找到該元素。 在此示例中，JavaScript代碼（請參見下文）嘗試操作尚不存在的DOM元素（本身，即canvas元素），因為該代碼存在於 DOM元素的定義內。
如果不定義
<script>標記，則無法識別JavaScript，並且標記不能位於另一個標記內，因此無法在標記的屬性部分中運行代碼（即<tag <invalidtag ..> >）=之后的任何內容都將解釋為鍵的值 。 “ window。*”僅被解釋為字符串，在這種情況下，對於canvas，寬度/高度的值無效。
最接近有效設置（近似於此定義標簽方式）的方法是使用內聯document.write（）。 在HTML中：
<script>
document.write("<canvas width=" + window.innerWidth +
" height=" + window.innerHeight + "></canvas");
</script>
但是，由於缺乏可維護性，可讀性，安全性等，建議使用DOM元素定義大小。 如果您需要畫布的初始狀態填充窗口，則可以執行以下操作：
#myCanvas {
position: fixed;
left: 0;
top: 0;
width:100%; /* make sure html and body has width/height defined 100% */
height:100%;
}
但是，這只會更新canvas 元素 ，而不是其300x150的位圖 （除非定義了初始大小）。 當腳本可以運行時，請更新JavaScript中的位圖大小：
updateCanvasSize();
window.onresize = updateCanvasSize;
// assuming var canvas = ...element.. is already obtained
function updateCanvasSize() {
var rect = canvas.getBoundingClientRect(); // get pixel size of element
canvas.width = rect.width; // update bitmap which now match 1:1
canvas.height = rect.height;
// redraw content here as resizing the bitmap clears it
}
HTML5中的畫布大小
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.