chdyiboke / weekly

issue and share weekly
5 stars 1 forks source link

画布设置(style设置宽高和直接写canvas的宽高)的不同 #42

Open chdyiboke opened 3 years ago

chdyiboke commented 3 years ago

默认的画板、画布的宽和高是都是300*150的。

chdyiboke commented 3 years ago

设置style属性,都会拉伸(修改画板宽高) 情况一:

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

或者 行间样式中的 style=”” 情况二:

canvas.style.width = "500px";
canvas.style.height = "500px";

相当于把画板的宽和高改变了,画布的宽和高还是默认值,所以画布会出现拉伸的情况。


直接设置宽和高相当于是同时修改了画板和画布的宽和高,所以在画布上画的图形不会出现拉伸: 情况一:

<canvas width="500" height="500"></canvas>

或者 行间样式中的 style=”” 情况二:

canvas.width = 500;
canvas.height = 500;