首页新闻找找看学习计划

为什么canvas 同时被设定width和height后,画出的矩形大小不形状对呢?

0
悬赏园豆:5 [已解决问题] 解决于 2015-07-17 11:31

这样的效果是什么原理导致的呢?

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        canvas{
            margin: 0;
            padding:  0;    
            display: inline-block;;
        }
        #draw1{            
            border:solid 5px rgba(47, 72, 202, 0.35);
            width: 300px;
            height: 300px;
        }

        #draw2{            
            border:solid 5px rgba(189, 42, 97, 0.35);
        }
    </style>    
</head>
<body>
<section>
    <canvas id="draw1"></canvas>
    <canvas id="draw2"></canvas>
</section>
</body>
</html>
<script type="text/javascript">
    // 蓝色框
    var canvas1 = document.getElementById("draw1");
    var context1 = canvas1.getContext("2d");
    context1.fillStyle = "#16BFF0";
    context1.fillRect(0,0,100,100);

    //红色框
    var canvas2 = document.getElementById("draw2");
    var context2 = canvas2.getContext("2d");
    context2.fillStyle = "#16BFF0";
    context2.fillRect(0,0,100,100);
</script>

实际显示的效果如下图:

米修君的主页 米修君 | 小虾三级 | 园豆:553
提问于:2015-07-17 09:18
< >
分享
最佳答案
0

是css中定义了draw1的宽度与高度引起的

收获园豆:5
dudu | 高人七级 |园豆:39222 | 2015-07-17 09:50

是的,CSS同时定义了canvas的宽度和高度就会引发问题,单独定义其中一项却不会。

但是fillRect定义的100x100为什么没有效果了呢?

为什么canvas的size会影响到fillrect的size呢?就算fill的区域超过了canvas,最多就是不画出来就完了吧。

米修君 | 园豆:553 (小虾三级) | 2015-07-17 10:58

我好像知道是怎么回事了~~

thks for your attention ....

米修君 | 园豆:553 (小虾三级) | 2015-07-17 11:31
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册