为什么canvas宽高要设置在标签内>>宽高设置在style和设置在canvas的区别

最新推荐文章于 2021-01-11 13:00:50 发布

weixin_30312557

最新推荐文章于 2021-01-11 13:00:50 发布

阅读量227

点赞数

原文链接：http://www.cnblogs.com/jacobb/p/6814317.html

版权

一直很困惑为什么canvas标签和其他标签不一样，宽高需要设置在canvas标签里，设置在style里就会有问题。

纯粹个人理解，有错误欢迎指出。

> 结论写在头

设置在style里有问题其实是因为：

canvas标签里的宽高是相当于定义画布的大小（默认宽300px，高150px）。在定义了画布之后，canvas就相当于一张图片了，类似于img，所以这个时候再设置宽高，就会把canvas拉伸成style里设置的宽高了。

下面看例子：

> 默认状态

<style>
    body{background:black;}
    #c{background: yellow;}
    div{background: pink;width: 300px;height: 150px;}
</style>
<script>
    window.onload = function(){
        var oC = document.getElementById('c');
        var oGC = oC.getContext('2d');

        oGC.strokeRect(50,50,100,100);
    }
</script>

<body>
    <canvas id="c"></canvas>
    <div>width: 300px; height: 150px;</div>
</body>

在canvas画布下加了一个DIV，可以看到画布的默认大小是300*150px的。

> 在canvas标签里设置300*300px

<!--其他代码同上-->
<body>
    <canvas id="c" width = "300px" height = "300px""></canvas>
    <div>width: 300px; height: 150px;</div>
</body>

这里要注意在canvas标签里设置宽高的方式，是直接写width = "300px" height = "300px"，而不是以行间样式的方式设置的。

> 在canvas标签里设置300300px后，style设置成300150px

<style>
    body{background:black;}
    #c{background: yellow;width: 300px;height: 150px;}
    div{background: pink;width: 300px;height: 150px;}
</style>
<script>
    //同上
</script>

<body>
    <canvas id="c" width = "300px" height = "300px""></canvas>
    <div>width: 300px; height: 150px;</div>
</body>

可以看到，canvas画布的大小的确是被设置成300*150px了，但里面的内容却被压缩了。

相当于一张300*300px的图片，被设置为300*150px，所以参考的长方形被压短了一半。

转载于:https://www.cnblogs.com/jacobb/p/6814317.html

weixin_30312557

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
为什么canvas宽高要设置在标签内>>宽高设置在style和设置在canvas的区别

一直很困惑为什么canvas标签和其他标签不一样，宽高需要设置在canvas标签里，设置在style里就会有问题。纯粹个人理解，有错误欢迎指出。> 结论写在头设置在style里有问题其实是因为：canvas标签里的宽高是相当于定义画布的大小（默认宽300px，高150px）。在定义了画布之后，canvas就相当于一张图片了，类似于img，所以这个时候再设置宽高，就会把canvas拉伸...
复制链接

扫一扫