HTML5 Canvas 如何自适应浏览器

来源：互联网 2023-03-16 19:11:58 276

自适应可以让窗口发生改变时获取浏览器窗口的大小，动态的改变canvas画布的大小，从而达到自适应得目的。

工具/原料

1>>

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

HTML5 Canvas 如何自适应浏览器

2>>

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

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

HTML5 Canvas 如何自适应浏览器

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

}

HTML5 Canvas 如何自适应浏览器

3此文章未经许可获取自百度经验

4>>

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

HTML5 Canvas 如何自适应浏览器

5>>

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

HTML5 Canvas 如何自适应浏览器

6>>

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

HTML5 Canvas 如何自适应浏览器

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： HTML

上一篇：easyui-accordion 设置标题颜色下一篇：如何将div中的内容进行删除