canvas新手常见问题

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()
这两个方法获取的都是数字，不带单位