6．使Canvas填满浏览器窗口

到现在为止，我们使用的canvas元素一直采用固定的500像素的宽度和高度。这个尺寸没有问题，但是如果我们想要将它填满整个浏览器窗口，又该如何做呢？对于普通的HTML元素，可以将width和height属性设置为100%，然后一切就都满足要求了。然而，canvas元素并不支持这种方法，它会忽略百分比，将100%解释为100像素，200%解释为200像素，以此类推。因此，我们需要使用另一种方法。

最简单的方法是将canvas元素的宽度和高度精确设置为浏览器窗口的宽度和高度。可以使用window浏览器对象和jQuery方法获取窗口的宽度和高度：

var canvas = $("#myCanvas"); 
var context = canvas.get(0).getContext("2d");
canvas.attr("width", $(window).get(0).innerWidth); 
canvas.attr("height", $(window).get(0).innerHeight); 
context.fillRect(0, 0, canvas.width(), canvas.height()); 

在这里使用了$ (window) .get(0).innerHeight，而不使用$(window) .height()，原因是后者似乎并不支持所有测览器。你会发现这种方法实际上并非完全正确，因为canvas元素和浏览器窗口旁边还会有一个白色空隙。

要解决这个问题，我们需要使用一些css。在文本编辑器中新建一个文件，将它命名为canvas.css，保存到HTML文档所在目录。在css文件中添加以下代码，然后保存：

* { margin: 0; padding: 0; } 
html, body { height: 100%; width: 100%; } 
canvas { display: block; } 

第一行代码将所有HTML元素的margin和padding重置为0，从而删除白色边框。这一般称为CSS重置（reset）。还有其他更好的方法可以实现CSS重置，但是现在使用的这种方法已经满足我们的需要了。第二行代码并不是必需的，但是它可以保证html和body元素使用整个浏览器窗口的宽度和高度。最后一行代码将canvas元素从inline修改为block，这样我们才能够正确地设置宽度和高度，从而使之能够使用整个测览器窗口的宽度和高度，而不会出现滚动条。

要在HTML文档中使用这个CSS文件，需要将下面的代码添加到head元素中引入jQuery的script元素之前：

<link href="canvas.css" rel="stylesheet" type="text/css" />

这个元素将链接刚刚创建的CSS文件，然后运行其中的样式。结果就是canvas元素完美地填满浏览器窗口。但是，还有问题要解决。

如果你调整浏览器窗口大小，canvas元素仍然会保持原来的尺寸，这样，如果窗口缩小过多就会显示滚动条。为了解决这个问题，需要在调整浏览器窗口大小的同时调整canvs元素的大小。要是jQuery有一个当浏览器窗口大小调整时触发的resize方法该有多好，这个方法应该类似于DOM准备好时触发的ready方法。幸好，它还真有一个resize方法，而且完全满足我们的需要。

$(window).resize(resizeCanvas); 
 
function resizeCanvas() 
{
    canvas.attr("width", $(window).get(0).innerWidth); 
    canvas.attr("height", $(window).get(0).innerHeight); 
    context.fillRect(0, 0, canvas.width(),canvas.height()); 
}; 
 
resizeCanvas(); 

这里并没有什么新代码，大多数代码都只有少量变化。主要增加的是jQuery的resize方法，它被设置为每当浏览器窗口发生大小变化时，就调用resizeCanvas函数。之前用来设置canvas元素宽度和高度的所有代码都移到这个函数之中，包括绘制与Canvas相同尺寸的矩形（记住：修改宽度和高度会重置Canvas，因此所有内容都必须重新绘制）。最后一个语句是调用resizeCanvas函数，在页面首次加载时执行一次初始化操作。

运行后，你会发现canvas无素可以完美地动态调整大小，不会出现滚动条。

发布时间：2013/1/22 22:47:43  阅读次数：10181