javascript - canvas坐标 相关的问题

Question

看一下如下代码：

  <style>
    #can{width:300px;height:300px;border:1px solid #ccc;}
    .test{width:50px;height:50px;background-color:green;}
  </style>
  <canvas id='can'></canvas>
  <p class='test'></p> <!--一个宽高50px的正方形-->
  <script>
    function $id(id){
      return document.getElementById(id);
    }
    var can=$id('can').getContext('2d');
        can.fillRect(0,0,50,50);   //  画一个长度50的正方形
        can.fillStyle='red';
        can.fill();
  </script>
 

一个是宽高50px的p元素，一个是使用canvas绘制出来的宽高50的图形 。

结果一对比，使用canvas绘制出来的图形显然要比p元素要大！

难道说在canvas中的类似于（50,50） 的坐标的含义不是意味着：x坐标50px，y坐标50px ？？

如何使用canvas精确的绘制出 长宽为50px的图形（要和p元素设置宽高50px做出来的大小一致！）？

Answer 1

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/

Answer 2

canvas的height和width不要在css里面指定。