Fe-interview: [html] 第133天 canvas默认画布的尺寸是多大?怎样设置才能不会变形?

Created on 26 Aug 2019  ·  3Comments  ·  Source: haizlin/fe-interview

第133天 canvas默认画布的尺寸是多大?怎样设置才能不会变形?

html

Most helpful comment

默认画布尺寸为300*150 不加单位。

如果直接在css中设置canvas元素的width和height会导致画面变形。

如果不想画面变形可以直接在标签中设置,或者通过js来设置属性的宽高。
<canvas width='300' height='200' id= 'a'>

var can = document.getElementById('a')
can.width ='500';
can.height = '300'

All 3 comments

默认画布尺寸为300*150 不加单位。

如果直接在css中设置canvas元素的width和height会导致画面变形。

如果不想画面变形可以直接在标签中设置,或者通过js来设置属性的宽高。
<canvas width='300' height='200' id= 'a'>

var can = document.getElementById('a')
can.width ='500';
can.height = '300'

canvas 不设置宽高时默认为 300 * 150。使用 CSS 设置 canvas 的宽高会按比例缩放我们设置的值,从而导致变形。
所以为了防止变形,我们可以选择直接在 canvas 标签中设置宽高,也可以使用 javaScript 进行设置。

Was this page helpful?
0 / 5 - 0 ratings