Canvas填满浏览器窗口操作（九）

首先如何画一个铺满浏览器的canvas，有人会想这样

context.fillRect(0,0,100%,100%);然而很不幸，这是无效的！

那怎么来呢？？使用以下函数，在加上上一篇已经说了canvas.attr可以重置Canvas的高和宽，

$(window).get(0).innerWidth
$(window).get(0).innerHeight
这2个是返回浏览器的宽和高

所以有代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>html5</title><script type="text/javascript" src="jquery-3.1.1.min.js"></script><script type="text/javascript" >$(document).ready(function(){var  canvas = $("#myCanvas");var  context = canvas.get(0).getContext("2d");canvas.attr("width",$(window).get(0).innerWidth);canvas.attr("height",$(window).get(0).innerHeight);context.fillStyle = "#12ad31";context.fillRect(0,0,canvas.width(),canvas.height());})</script>
</head>
<body><canvas id="myCanvas"><!-- no no no no --></canvas></body>
</html>

效果图：

我们发现其实还是有一点距离的，看左上角！！！

这个时候我们需要加点css来填满！！！

创建一个css文件并引用！！！

css代码如下

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

html5代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>html5</title><link href="html5.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="jquery-3.1.1.min.js"></script><script type="text/javascript" >$(document).ready(function(){var  canvas = $("#myCanvas");var  context = canvas.get(0).getContext("2d");canvas.attr("width",$(window).get(0).innerWidth);canvas.attr("height",$(window).get(0).innerHeight);context.fillStyle = "#12ad31";context.fillRect(0,0,canvas.width(),canvas.height());})</script>
</head>
<body><canvas id="myCanvas"><!-- no no no no --></canvas></body>
</html>

效果图：这样就ok了！！！

但是当我们改变浏览器窗口大小，会出现滚动条，如何去掉适应窗口呢？？

有个函数调整窗口大小就会触发，所以我们只要在这个触发函数李重置canvas的大小就ok了

触发函数

$(window).resize(resizeCanvas);

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>html5</title><link href="html5.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="jquery-3.1.1.min.js"></script><script type="text/javascript" >$(document).ready(function(){var  canvas = $("#myCanvas");var  context = canvas.get(0).getContext("2d");canvas.attr("width",$(window).get(0).innerWidth);canvas.attr("height",$(window).get(0).innerHeight);context.fillStyle = "#12ad31";context.fillRect(0,0,canvas.width(),canvas.height());//窗口大小改变就调用resizeCanvas函数$(window).resize(resizeCanvas);//重置函数function resizeCanvas(){canvas.attr("width",$(window).get(0).innerWidth);canvas.attr("height",$(window).get(0).innerHeight);context.fillStyle = "#12ad31";context.fillRect(0,0,canvas.width(),canvas.height());};})</script>
</head>
<body><canvas id="myCanvas"><!-- no no no no --></canvas></body>
</html>

这样就不会出现滚动条了！！！

Canvas填满浏览器窗口操作（九）相关推荐

Python WebDriver API - 浏览器窗口操作
首先需要获取WebDriver实例对象 from selenium import webdriver driver = webdriver.Chrome() #获取WebDriver实例对象 1.浏 ...
selenium常用的浏览器窗口操作
我们平时正常使用浏览器的时候,在某一个操作可能会打开一个新的浏览器标签,是直接跳到新标签页的;那么在自动化中是不会自动选择新打开的标签页的,在自动化中是如何安全稳定的选取新标签页的,代码如下: fro ...
qt chart 如何使网格填满整个窗口_Qt实现截屏的关键函数
截屏功能就是将截屏时刻的屏幕画面保存为图片.所以截屏的关键就在于如何获取屏幕的内容,幸运的是Qt为我们提供了这样的接口.它就是QScreen类的grabWindow函数.函数声明如图: 函数返回的就是 ...
如何将div高度填满剩余高度
下列代码中navbar高度为30px,content高度需要填满浏览器的剩余高度 <div id="body"> <div id="navbar&quo ...
selenium操作浏览器窗口最大化和刷新
实际测试过程中经常遇到打开一个页面并不是全屏显示,但是却希望它能够全屏显示或者新增一条记录后需要刷新一下看能不能再列表中正常显示. 于是就有了今天的关于对浏览器窗口的最大化和刷新页面.需要说明的一点: ...
selenium之浏览器弹出新窗口并在新窗口操作
在一个页面上点击一个链接之后,并不是在当前页面上打开,而是重新打开一个新页面:这种情况下如何跳转到新的页面上操作? 首先,需要了解的是每个窗口都有句柄的,可以理解为浏览器窗口的唯一标识符,根据这个标识 ...
pyQt布局-填满窗口的设置方式
1.两种填满情况 1.文本框填满窗口在构造界面后,将文本框设置为中心组件. def init(self, parent=None): super().init(parent) # 调用父类构造函数, ...
c++浏览器自动化操作_精：C# 利用Selenium实现浏览器自动化操作
概述 Selenium是一款免费的分布式的自动化测试工具,支持多种开发语言,无论是C. java.ruby.python.或是C# ,你都可以通过selenium完成自动化测试.本文以一个简单的小例子 ...
Javascript学习7 - 脚本化浏览器窗口
原文:Javascript学习7 - 脚本化浏览器窗口本节讨论了文档对象模型.客户端Javascript下Window中的各项属性,包括计时器.Location对象.Histroy对象.窗口.浏览器 ...

Canvas填满浏览器窗口操作（九）

Canvas填满浏览器窗口操作（九）相关推荐

最新文章

热门文章