Question

我试图通过以下代码制作html5画布全尺寸。我知道有其他方法可以使用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>

Answer 1

使用javascript，执行以下操作：

var canvas = document.getElementById("myCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight

<强> Demo

Answer 2

如果你只是需要一个解决方案，它实际上可以这样做

  #mycanvas{
       background-color : #d3d3d3;
       width : 100%;
       height : 100%;
    }

Answer 3

你的代码的问题是window.innerWidth实际上是Javascript。 Javascript调用需要在其周围添加脚本标记才能被识别为Javascript。

Answer 4

没有JS的更简单，更清洁的解决方案。只需使用：

body{
    width:100%;
    height:100%;
}

#mycanvas{
    width:100%;
    height:100%;
    background-color : #d3d3d3;
}

Answer 5

为什么这不起作用有几个原因：

JavaScript是为了操纵DOM。为了使其工作，DOM需要在找到元素之前存在。在这个例子中，JavaScript代码（见下文）试图操纵一个尚不存在的DOM元素（本身，即canvas元素），因为代码存在于里面 DOM元素的定义。 / p>
如果没有定义<script>标记就无法识别JavaScript，并且标记不能位于其他标记内，因此无法在标记的属性部分运行代码（即。<tag <invalidtag ..> >）
=之后的任何内容都被解释为键的值。 “window。*”只是被解释为一个字符串，在这种情况下，画布对于宽度/高度来说是无效的值。

最接近有效设置以近似定义标记的方法是使用内联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%;
    }

但这只会更新画布元素，而不是其位图仍然是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 Canvas全尺寸

5 个答案: