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填满浏览器窗口操作（九）

猜你喜欢