12.7 HTML 使画布填满浏览器窗口

使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元素的marginpadding重置为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元素可以完美地动态调整大小,不会出现滚动条。