您的位置：首页 > Web前端 > JavaScript

javascript设置canvas宽高

2015-06-16 17:02 555 查看
环境：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>




参考：http://www.cnblogs.com/wangwc/archive/2012/07/02/2572735.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航