脚本宝典收集整理的这篇文章主要介绍了html5教程-html5 Canvas 如何实现自适应屏幕大小？，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

 $(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();  

最简单使用Canvas元素：

<canvas width="300" height="300"></canvas>

这样就创建出一个空白画布。

但是这样创建出的画布不能随着浏览器窗口大小的改变而动态的改变画布的大小。而这一点往往又非常重要， 因为我们会经常改变浏览器窗口大小，不会一直保持某个固定的大小。

首先可以先准备一个canvas.css 放到html文件的同一目录下，css内容：

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

然后在html文件里引入canvas.css:

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

这样保证整个canvas能填充整个浏览器窗口

但是仅仅是这样canvas的内容并不能随着窗口大小的改变而改变。

我们需要在窗口大小改变的同时调整画板的大小，所以我们需要在js中加入下面这段代码：

 $(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();  

这样画布就能根据窗口大小自动调整了，并且不会出现滚动条了。

注：使用$(window).get(0).innerHeight代替$(window).height()是因为后者无法返回所有浏览器窗口的完整高度值。这种方法实际效果并不完美，浏览器窗口中canvas元素和滚动条的四周仍存在白色区域

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-html5 Canvas 如何实现自适应屏幕大小？全部内容，希望文章能够帮你解决html5教程-html5 Canvas 如何实现自适应屏幕大小？所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。