javascript设置canvas宽高

最新推荐文章于 2025-02-17 17:17:17 发布

转载最新推荐文章于 2025-02-17 17:17:17 发布 · 9.6k 阅读

文章标签：

#javascript #canvas #宽高

javascript 专栏收录该内容

56 篇文章

订阅专栏

本文介绍如何利用window对象的onresize事件属性让Canvas元素自适应浏览器窗口大小变化，确保页面布局不受影响，特别适用于游戏开发场景。

环境：win7 32位,ie11

转自：http://shibingwei.diandian.com/post/2012-06-13/40028709329

画布Canvas自适应浏览器窗口调整宽高

让画布自适应浏览器窗口调整宽高可以利用window对象的onresize事件属性，当浏览器窗口发生大小调整时会触发此事件。注意在css样式中应当清除外边距和内边距的浏览器默认样式，同时将canvas的display属性设置为“block”。
此方法的目的是为了在调整浏览器窗口的时候页面不出现滚动条，在利用画布进行游戏开发的场合很常用。

<!DOCTYPE html>
<body>
    <canvas id="a" width=300 height=300></canvas>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #a{    
            display: block;
            background-color: gray;
        }    
    </style> 
    <script>
        var canvas=document.getElementById("a");
        window.onresize=resizeCanvas;
        function resizeCanvas(){
            canvas.width=window.innerWidth;
            canvas.height=window.innerHeight;
        }
        resizeCanvas();   
    </script>
</body>