首先如何画一个铺满浏览器的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>
这样就不会出现滚动条了!!!