html5 Canvas 如何自适应屏幕大小

悠悠 2022-05-29 07:18 650阅读 0赞

最简单使用Canvas元素：  
<canvas width="300" height="300"></canvas>  
这样就创建出一个空白画布。  
  
但是这样创建出的画布不能随着浏览器窗口大小的改变而动态的改变画布的大小。而这一点往往又非常重要， 因为我们会经常改变浏览器窗口大小，不会一直保持某个固定的大小。  
  
首先可以先准备一个canvas.css 放到html文件的同一目录下，css内容：

Javascript代码   ![收藏代码][icon_star.png]

1.  \* \{ margin: 0; padding: 0; \}  
2.     
3.   html, body \{ height: 100%; width: 100%; \}  
4.     
5.   canvas \{ display: block; \}

然后在html文件里引入canvas.css:  
<link href="canvas.css"rel="stylesheet" type="text/css">  
这样保证整个canvas能填充整个浏览器窗口  
  
但是仅仅是这样canvas的内容并不能随着窗口大小的改变而改变。  
我们需要在窗口大小改变的同时调整画板的大小，所以我们需要在js中加入下面这段代码：

Javascript代码   ![收藏代码][icon_star.png]

1.  $(window).resize(resizeCanvas);  
2.     
3.   function resizeCanvas() \{  
4.     
5.          canvas.attr("width", $(window).get(0).innerWidth);  
6.     
7.          canvas.attr("height", $(window).get(0).innerHeight);  
8.     
9.          context.fillRect(0, 0, canvas.width(), canvas.height());  
10.    
11.  \};  
12.    
13.  resizeCanvas();

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

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

转自：http://lvxineye.iteye.com/blog/1671080

[icon_star.png]: /images/20220529/63946ec246c0473587b51c91098d7658.png