HTML5 Canvas 如何自适应浏览器

1、1>>

创建一个新的html文件，简单重置样式，添加canvas，给画布一个红色背景。

2、2>>

这里用jquery写，所以先引入jquery

可以看到默认下的canvas的画布大小 300*150

3、3>>

编写resizeCnavas方法，用来动态获取并改变canvas的大小。

function resizeCanvas(){

    $('canvas').attr('width',$(window).get(0).innerWidth);

    $('canvas').attr('height',$(window).get(0).innerWidth);

    $('canvas').fillRect(0,0,$('canvas').width(),$('canvas').height());

}

4、4>>

在页面加载完先对canvas进行一次画布的设置。

5、5>>

窗口大小发生改变时，动态调用上面的方法。

6、6>>

再次打开浏览器，就获得了自适应的canvas画布。