canvas height与style.height的区别

在写canvas的例子中,经常是直接设置canvas的width和height的属性,在画布上画图形能按正确的比例显示.

但是,如果不直接给canvas设置width,height属性值,那就会奇怪的问题发生.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
        <title></title>
        <style type="text/css">
            #canvas{
                width:400px;
                height:400px;
                border:1px solid #ccc;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas"></canvas>
        <script type="text/javascript">
            var canvas = document.getElementById('canvas'),
                ctx = canvas.getContext("2d");
            console.log(ctx.width, ctx.height)
            ctx.fillStyle = "red";
            ctx.fillRect(0,0,100,100)
        </script>
    </body>   
</html>


fillRect把图形以正方形渲染,但显示出来的却是一个长方形,高被放大两倍.

如果再给canvas添加width,height属性,如

<canvas id="canvas" width="100" height="100"></canvas>
修改后红色块铺满整个canvas
所以可以了解到
style.width,style.height是画布在浏览器渲染的宽度和高度.
width,height是画布的实际宽高(当实际宽高没有设置时,默认值是width=300,height=150)

例如,当style.width="300",width="100",那浏览器可以看到的画布是300.
然后向画布画一个宽为50的图形,这时候是把300当为100(就是将浏览器看到的宽度视为100,不管它的style.width="300").
所以图形的宽度就是50/100=1/2,也即二分之一,我们能看到的宽度时画布的一半.
posted @ 2014-07-30 09:52  outside  阅读(585)  评论(0)    收藏  举报