画布最大化错误？

在我看来，我必须在一个小时内遇难，好像在Firefox，Safari和Chrome中发生的奇怪行为。这里是一些代码：画布最大化错误？

<!doctype html> 
<html> 
    <head> 
     <title>Watch me grow scrollbars!</title> 
    </head> 
    <body onload="resizeCanvas()"> 
     <canvas id="canvas"></canvas> 
    </body> 
</html> 

<script type="application/javascript"> 
    function resizeCanvas() { 
     var canvas = document.getElementById("canvas"); 
     canvas.setAttribute("height", window.innerHeight); 
     canvas.setAttribute("width", window.innerWidth); 
    } 
</script>

基本上，画布总是似乎最大化'太多'，并且窗口增长两侧的滚动条。我尝试过使用各种方法获取文档尺寸，包括嵌套在100％宽的绝对定位的div中的canvas，以及提取document.documentElement.clientWidth/Height属性。

为了确保我不会疯狂，我放置了一个图像代替画布，瞧，相同的代码完美地将图像拉伸到文档尺寸。

我在这里做错了什么？我太累，无法理解。必须......喝点东西。

来源

2010-05-04 dmkc

您可能还需要为'body'和'canvas'元素设置'margin：0;填充：0;边框宽度：0;'。但说实话，我在Firefox中的快速测试仍然显示滚动条。 – Zecc 2011-05-28 18:26:38

为画布设置'display：block'就是我想的。 – urraka 2012-12-24 22:48:11

我还没找到问题的解决方法（仍然可以反馈），所以现在我有父容器元素的隐藏溢出，这大致带来了我在找的东西。不过，如果这是不一致的，它不会好。除非我失去了一些东西..

来源

2010-05-04 05:16:52 dmkc

如果您正在寻找一种方法来扩展画布以覆盖整个页面，我发现的最佳解决方案是让CSS自动调整到100％，然后使用当前画布元素大小来重置画布分辨率。
为了避免滚动条，您还必须将画布CSS位置设置为绝对值。

<!DOCTYPE html> 
<html> 
    <body onload="resizeCanvas()" style="margin: 0;"> 
     <canvas id="canvas" style="position: absolute; width: 100%; height: 100%;"></canvas> 
    </body> 
</html> 

<script type="application/javascript"> 
    function resizeCanvas() { 
     var canvas = document.getElementById("canvas"); 
     canvas.setAttribute("width", canvas.offsetWidth); 
     canvas.setAttribute("height", canvas.offsetHeight); 

     // We draw a circle, just to test that it works 
     var ctx = canvas.getContext("2d"); 
     ctx.beginPath(); 
     ctx.arc(canvas.offsetWidth/2, canvas.offsetHeight/2, canvas.offsetHeight/2, 0, Math.PI*2, true); 
     ctx.closePath(); 
     ctx.fill(); 
    } 
</script>

来源

2011-05-28 15:35:06 h3r3

-1

井（在Chrome 34，火狐27浏览器11测试），这在Firefox 4，但我还没有在其他浏览器尝试过，因为我没有他们在这台电脑中。

<!doctype html> 
<html> 
    <head> 
     <title>Watch me grow scrollbars!</title> 
<style> 
body { margin: 0; padding: 0; } 
canvas { width: 100%; height: 100%; border: 0; } 
</style> 
<script type="text/javascript"> 
    function resizeCanvas() { 
     var canvas = document.getElementById("canvas"), 
      ctx = canvas.getContext('2d'), 
      height = document.body.clientHeight, 
      width = document.body.clientWidth; 
     canvas.setAttribute("height", height); 
     canvas.setAttribute("width", width); 
     ctx.fillStyle = 'rgb(128,128,128)'; 
     ctx.fillRect(10, 10, width-20, height-20); 
    } 
</script> 
    </head> 
    <body onload="resizeCanvas()"> 
     <canvas id="canvas"></canvas> 
    </body> 
</html>

至于IE7（不支持帆布反正），我只好到脚本的类型属性改变从application/javascript到text/javascript，使代码工作。

这就是为什么：（上What is the javascript MIME type for the type attribute of a script tag?报价keparo）

的MIME类型JavaScript不是标准化多年。现在正式为：“application/javascript”。

这里真正踢球的是，大多数浏览器将不使用属性无论如何，至少不是在 script标签的情况。他们实际上在包内查看并确定自己的类型。

因此，底线是，类型=“文/ JavaScript的”没有做任何事情只要JavaScript是有关，但它的规范的一部分为HTML 4和XHTML 1.0。

我不知道这是否仍代表更新版本的IE浏览器。

来源

2011-05-28 18:55:30 Zecc

画布最大化错误？

回答

相关问题