1. 为什么要设置display: block?
图片文字等inline元素默认是和父级元素的baseline对齐的,而baseline又和父级底边有一定距离(这个距离和 font-size,font-family 相关), canvas也是这样,为了避免这个问题,一般将canvas设置为块级元素。
2. 为什么通过css设置了canvas的宽高,还要设置canvas元素的width、height属性?两者有何不同?
css设置canvas的宽高与css设置其他标签作用相同;
设置canvas元素的width、height属性是设置canvas横向、竖向的像素数
例如:
css设置canvas宽高分别为200px和50px
设置canvas元素的width、height属性分别为400和50
我们通过rect方法给整个canvas填满颜色,要用
canvas.getContext('2d').rect(0, 0, 400, 50)
而不是
canvas.getContext('2d').rect(0, 0, 200, 50)
而最终我们在浏览器上看到的,是一个200*50的方块
在线演示
3. 设置canvas元素的width、height属性必须不能带单位
可以设置数字如:200,也可以使用字符串如:‘200’
可以用canvas.clientWidth、canvas.clientHeight获取元素的宽高,
也可提使用{width, height} = canvas.getBoundingClientRect()
这两个方法获取的都是数字,不带单位