canvas整体放大_HTML5 - 让Canvas大小自适应（自动撑满整个屏幕）

1，问题描述

我们知道使用 canvas元素可以创建出一个空白的画布。

效果如下：

但是这样创建的画布尺寸是一开始就设置好的，不能随着浏览器窗口大小的改变而动态改变。而 Canvas又无法直接将 width或 height属性设置为 100% 来自适应屏幕。

2，解决办法

如果我们想让画布撑满整个浏览器窗口。也就是说要当我们改变浏览器窗口大小时，画布也能随之改变，可以进行如下操作：

CSS 方面：去掉所有元素的外间距、内边距，html和 body宽高设为 100%，canvas 元素 display 设为 block

JS 方面：监听窗口的 resize事件，在窗口大小改变的同时调整 canvas的大小。

3，完整代码

这里我们使用 jQuery来处理窗口尺寸改变事件响应，以及属性设置。

同时使用 $(window).get(0).innerHeight获取窗口高度，而不是 $(window).height()。是因为后者效果并不完美，无法返回所有浏览器窗口的完整高度值，这样浏览器窗口中 canvas元素和滚动条的四周可能会仍存在白色区域。

* {

margin: 0;

padding: 0;

}

html, body {

height: 100%;

width: 100%;

}

canvas {

display: block;

background: #D6F8FF;

}

$(function() {

//添加窗口尺寸改变响应监听

$(window).resize(resizeCanvas);

//页面加载后先设置一下canvas大小

resizeCanvas();

});

//窗口尺寸改变响应(修改canvas大小)

function resizeCanvas() {

$("#myCanvas").attr("width", $(window).get(0).innerWidth);

$("#myCanvas").attr("height", $(window).get(0).innerHeight);

};