用记事本自学HTML+JS-CSS和HTML中分别设置长宽的影响

今天试了下在CSS中对一个Canvas设置width height和在HTML中设置的区别。

为了体现区别，在canvas中绘制了圆。

我先在HTML中，设置了一个没有设定长宽的canvas标签，不设置任何参数。

然后用JS画了圆做对比。

<canvas id="canvas1"></canvas>

CSS部分内容，为了显示清晰，在canvas1外面加了个线框。

#canvas1 {
    border: 1px solid black;

}

为了做对比，在JS中加了画圆的内容，作为参照对比：

let canvas=document.getElementById("canvas1");
//获取Canvas的2D context
let ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.arc(20, 20, 20, 0, Math.PI*2, true);
ctx.fillStyle="rgba(255,0,0,1)";
ctx.fill();
ctx.closePath();

在这个情况下，浏览器打开看到的，是默认的400*300的一个框和圆：

 然后，对CSS设置长宽的变化，故意没有按照比例做设置。

#canvas1 {
    border: 1px solid black;
    width: 800px;
    height:300px;
}

其他都没有动的情况下，画布的圆出现了变形。

 小结：

1. 对于canvas，CSS的长宽设置可能会对画面造成扭曲拉伸，慎用。
2. 建议在HTML的标签中，定义好canvas的长宽尺寸大小。