错误的设置canvas宽高导致图像变形

canvas大小默认为300X150

当错误的设置宽高时，会导致画布内的内容变形，以下为错误方式!!!

1. 使用内联style设置宽高

   <canvas style="width:300px;height:300px;"></canvas>
   

2. 在css中设置

   canvas{
       width: 300px;
    	height:300px;
   }
   

3. js设置到style中

   let canvasElement = document.createElement("canvas");
   canvasElement.style.width = "300px"
   canvasElement.style.height = "300px"
   

4. js不设置到style中，但是加了px

   let canvasElement = document.createElement("canvas");
   canvasElement.width = "300px"
   canvasElement.height = "300px"
   

以上方式都会导致画布内的内容变形。

下面是正确方式

1. 标签属性中设置

   <canvas width="450" height="350"></canvas>
   

2. js设置

   let canvasElement = document.createElement("canvas");
   canvasElement.width = 300
   canvasElement.height = 300
   

总结：设置canvas的宽高时，不能设置单位，不能在style样式中设置