画布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>

 

posted @ 2013-01-05 20:54  蔚_Way  阅读(3683)  评论(1)    收藏  举报