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

优质

小牛编辑

137浏览

2023-12-01

到现在为止，我们使用的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.innerWidth || $(window).width()); 
    canvas.attr("height", window.innerHeight || $(window.height()); 
    context.fillRect(0, 0, canvas.width(), canvas.height());

注意在这里使用了window.innerHeight || $(window.height()，而不是简单使用$(window) .height()或者window.innerHeight，原因是$(window) .height()在iOS safari4下可能有兼容性问题，而window.innerHeight在老版本的ie下（IE <= 8）不工作。（参考阅读jquery not offer right window height on iOS）。测试一下，你会发现这种方法还有点问题，因为由于留白和填充因素，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.innerWidth || $(window).width()); 
    canvas.attr("height", window.innerHeight || $(window.height()); 
    context.fillRect(0, 0, canvas.width(),canvas.height()); 
    }; 

    resizeCanvas();

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

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