javascript - HTML5 canvas 画布显示问题-PHP中文网问答

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
    </style>
</head>
<body>
    <canvas id="myCanvas" width="300" height="200" style="border:1px solid blue;"></canvas>
    <p id="p1"></p>
    <script type="text/javascript">
        var canv = document.getElementById('myCanvas');
        var context = canv.getContext('2d');
        context.fillStyle = "#ff0000";
        context.fillRect(0, 0, 100, 100);
    </script>
</body>
</html>

上面代码显示正常效果如下：

但是如果把 canvas的样式放在head中，结果运行效果如下图所示（画布并不是100*100的尺寸，这就是我疑问的地方），

后者效果的代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        #myCanvas{
            width:300px;
            height:200px;
            border:1px solid blue;
        }
    </style>

</head>
<body>
    <canvas id="myCanvas"></canvas>
    <p id="p1"></p>
    <script type="text/javascript">
        var canv = document.getElementById('myCanvas');
        var context = canv.getContext('2d');
        context.fillStyle = "#ff0000";
        context.fillRect(0, 0, 100, 100);
    </script>
</body>
</html>

全部回复(3)

ringa_lee2017-04-10 16:59:48 3楼

Indeed, the <canvas> element has only two attributes, width and height. These are both optional and can also be set using DOM properties. When no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high. The element can be sized arbitrarily by CSS, but during rendering the image is scaled to fit its layout size: if the CSS sizing doesn't respect the ratio of the initial canvas, it will appear distorted.

canvas元素只有2个DOM属性(除了全局的属性外)，当没有显时的指定这2个属性时，系统会提供300宽，150高这2个值给canvas元素。你也可以通过CSS来指定这2个值，但是当CSS指定的宽高比和初始的宽高比不同时，canvas中的图像将会出现变形，按CSS中指定的比例进行缩放

问题的中的第1段代码指定了width和height，那么图像在这个宽高的画布上进行绘制；
第2端代码在CSS中指定，但是在canvas的DOM元素上没有指定宽高，那么按默认的300/150来先设定画布大小，CSS中重新指定了300/200，那么在宽度上没有变化，高度上缩放了原来的20/15约等于1.33倍，那么看到的最终图形效果在高度上为133。

同时如果你通过JS来重新设置Canvas的width和height属性值(不是通过CSS改变)，那么真个画布中的图像将被清除掉