Atitit html5 Canvas 如何自适应屏幕大小
Atitit html5 Canvas 如何自适应屏幕大小
可以用JS监控屏幕大小,然后调整Canvas的大小。在代码中加入JS
1 2 3 4 5 6 7 |
$(window).resize(resizeCanvas); function resizeCanvas() { canvas.attr("width", $(window).get(0).innerWidth); canvas.attr("height", $(window).get(0).innerHeight); context.fillRect(0, 0, canvas.width(), canvas.height()); }; resizeCanvas(); |
就可以了。
<canvas> 标签只是图形容器,您必须使用脚本来绘制图形
但是仅仅是这样canvas的内容并不能随着窗口大小的改变而改变。
我们需要在窗口大小改变的同时调整画板的大小,所以我们需要在js中加入下面这段代码:
Javascript代码
1. $(window).resize(resizeCanvas);
2.
3. function resizeCanvas() {
4.
5. canvas.attr("width", $(window).get(0).innerWidth);
6.
7. canvas.attr("height", $(window).get(0).innerHeight);
8.
9. context.fillRect(0, 0, canvas.width(), canvas.height());
10.
11. };
12.
13. resizeCanvas();
这样画布就能根据窗口大小自动调整了,并且不会出现滚动条了。
注:使用$(window).get(0).innerHeight代替$(window).height()是因为后者无法返回所有浏览器窗口的完整高度值。这种方法实际效果并不完美,浏览器窗口中canvas元素和滚动条的四周仍存在白色区域
html5 Canvas 如何自适应屏幕大小 - - ITeye技术网站.html
作者:: 绰号:老哇的爪子 ( 全名::Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿尔 拉帕努伊 )
汉字名:艾提拉(艾龙), EMAIL:1466519819@qq.com
转载请注明来源: http://blog.csdn.net/attilax
atiend
相关文章
- 数据透视表上线!如何在纯前端实现这个强大的数据分析功能?
- 跨平台移动APP开发进阶(二):HTML5+、mui开发移动app教程[通俗易懂]
- HTML5_ScrollInToView方法「建议收藏」
- HTML5期末大作业:大学生个人网站设计——我们的班级(7页) HTML+CSS+JavaScript 学生DW网页设计作业成品 html网页制作代码大全 html5网页设计作业代码
- Hype 4 Pro for Mac(HTML5动画制作软件) v4.1.12中文版
- 【HTML5】HTML5 多媒体标签 ② ( 视频标签 <video> | 视频标签常见属性 | autoplay 属性 | controls 属性 | poster 属性 | 设置多个格式视频 )
- html5 web worker实现异步执行 计数器详解编程语言
- html5的localStorage使用示例详解编程语言
- Html5音频和视频播放示例详解编程语言
- html5手机端播放音效不卡的方法详解编程语言
- html5 textarea 写入换行的方法详解编程语言
- 兼容性探究HTML5与Linux的兼容性(html5与linux)
- HTML5 Web SQL 数据库
- HTML5 新元素
- HTML5 拖放
- HTML5与Redis:如何优化网站性能?(html5redis)
- HTML5与Oracle结合,展现出更多可能(html5 oracle)
- HTML5之lang属性与dir属性的详解
- JavaScript使用HTML5的window.postMessage实现跨域通信例子
- jQuery结合HTML5制作的爱心树表白动画