canvas自适应屏幕

最新推荐文章于 2024-11-22 17:06:44 发布

elegancy_

最新推荐文章于 2024-11-22 17:06:44 发布

阅读量1.1k

点赞数

* { 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();

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

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