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.