Open wingmeng opened 5 years ago
如何为 <canvas> 设置尺寸?首先是最常见的方式,通过 canvas 的 width、height 属性来设置:
<canvas>
<canvas width="333" height="222" id="canvas1"></canvas>
如果是对 canvas 了解不足的小伙伴,可能会说出以下方式:
<!-- 通过外联或页级 CSS 设置宽高 --> <style> #canvas1 { width: 333px; height: 222px; } </style> <canvas id="canvas1"></canvas>
<!-- 通过行内 CSS 设置宽高 --> <canvas id="canvas1" style="width: 333px; height: 222px"></canvas>
如果按照上述设置了画布尺寸,你会发现在绘图时发生了变形失真,例如代码中明明绘制了一个圆形,最终渲染出来却不是正圆。这是因为,canvas 是有默认尺寸的,缺省宽高为 300×150px,如果在 CSS 中为其定义宽高,实际上是把宽高为 300×150px 的画布进行了拉伸,因此会导致绘图变形。
所以我们在为 canvas 设置尺寸时,推荐的方式是通过 canvas 标签的 width、height 属性来设置画布宽高,也可以使用 JS 来设置画布宽高(如下)。
const canvas1 = document.getElementById('canvas1'); // 注意:尺寸不能带单位,否则会报错 canvas1.width = 333; canvas1.height = 222;
如何为
<canvas>
设置尺寸?首先是最常见的方式,通过 canvas 的 width、height 属性来设置:如果是对 canvas 了解不足的小伙伴,可能会说出以下方式:
如果按照上述设置了画布尺寸,你会发现在绘图时发生了变形失真,例如代码中明明绘制了一个圆形,最终渲染出来却不是正圆。这是因为,canvas 是有默认尺寸的,缺省宽高为 300×150px,如果在 CSS 中为其定义宽高,实际上是把宽高为 300×150px 的画布进行了拉伸,因此会导致绘图变形。
所以我们在为 canvas 设置尺寸时,推荐的方式是通过 canvas 标签的 width、height 属性来设置画布宽高,也可以使用 JS 来设置画布宽高(如下)。