canvas自适应填满屏幕方法!!!

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

首先进行如上css设置消除默认边距。然后需要在resize事件下动态改变画布大小,因为canvas需要直接在标签的属性里定义宽高,而不能在样式表里写宽高,不管是内联样式(写在标签里的style属性里)还是内部样式(html文件中,一般是head标签内的style标签),原因详见http://www.cnblogs.com/qdog/p/7002770.html。

一般想要自适应填满屏幕都会在js中更改,如下:

window.addEventListener("resize", resizeCanvas);
function resizeCanvas() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}
原文地址:https://www.cnblogs.com/qdog/p/7002749.html