Question

不知道为什么我无法解决这个问题，但我正在尝试使用HTML5画布绘制一个矩形。高度是预定义的。但是我想宽度是浏览器的100％。我一直在使用这里的代码示例，但到目前为止还没有任何工作。

CSS

<style type="text/css">
body { 
    background:#414141;
    width:100%;
    margin:0px;
    display:block;
}

html {
    width:100%;
    display:block;
    margin:0px;
}

</style>

HTML＆amp;的Javascript

<canvas id="navBar" style="display:block; width=100%"></canvas>
<script>
var c = document.getElementById("navBar");
var ctx = c.getContext("2d");
ctx.fillStyle = "#262626";
ctx.fillRect(0,0,navBar.width,125);
</script>

而不是navbar.width我试过screen.width和window.innerWidth都没有。有什么想法或建议可以做得更好吗？

Answer 1

糟糕，我在这里引用了太多引号

<canvas id="navBar" style="display:block;" width="100%"></canvas>

应该是

<canvas id="navBar" style="display:block; width=100%"></canvas>

Answer 2

这有效：

c.style.width=window.innerWidth;

当然，这有一个问题，如果浏览器调整窗口大小，画布将太大或太小。所以我们可以附加一个事件监听器并等待这样的调整大小：

c.style.width=window.innerWidth;

window.addEventListener("resize", function(){
    c.style.width=window.innerWidth;    
}, false);

Answer 3

首先，将画布更改为<canvas id="navBar" style="width:100%"></canvas>

然后只获取<canvas>元素的宽度。

var c = document.getElementById("navBar");
var ctx = c.getContext("2d");
var width = c.width;

ctx.fillStyle = "#262626";
ctx.fillRect(0,0,width,125);

jsfiddle

Answer 4

尝试：

c.width = screen.width;

阐释：

screen.width是一个全局变量，用于存储屏幕当前宽度。
此代码将画布的宽度属性（c.width）设置为该值。

另请注意，还有另一个全局变量screen.height，用于存储屏幕＆＃39;当前的高度。这可以用类似的方式设置。

将HTML5画布调整为浏览器宽度

4 个答案:

尝试：

阐释：