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

*{
margin: 0;
padding: 0;
}
html,body{
width: 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