看一下如下代码：
2
652
一个是宽高50px的p元素，一个是使用canvas绘制出来的宽高50的图形 。
结果一对比，使用canvas绘制出来的图形显然要比p元素要大！
难道说在canvas中的类似于（50,50） 的坐标的含义不是意味着：x坐标50px，y坐标50px ？？
如何使用canvas精确的绘制出 长宽为50px的图形（要和p元素设置宽高50px做出来的大小一致！）？
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
canvas中的坐标是依赖其自身的width和height属性。默认值为300和150，单位为px。上面的代码中，如果你不通过CSS指定canvas的高宽，则50px的正方形大小将和50px的p一样。
但是通过CSS指定为宽300高300后，相当在canvas自身的宽高（300*150）在纵向拉长了一倍（150->300），所以你最后看到的canvas中的50px的方形和50px的p不一样。
最简单的理解方式，canvas和图片（
img）一样，都是有自身高度的（canvas：<canvas with="" height="">，img：imgElm.naturalWidth, imgElm.naturalHeight），CSS给它们指定的尺寸会在原始大小上进行变形例子：https://jsfiddle.net/ygjack/aqm9tkp8/
canvas的height和width不要在css里面指定。