使用html5的canvas进行图像绘制时出现的诡异问题。

1. 使用canvas进行图像绘制，可以绘制图像、文本、色块等等。但是坐标紊乱。
2. 查看canvas的宽度和高度，均显示正常。
3. 尝试绘制直线：（0，0） ==> (width,height)
4. 发现并不是真实的对角线。
5. 尝试绘制直线：(0,0) ==> (100,100)
6. 发现画出来的居然是一个矩形，头大如斗。
7. 查询各种文档，无果。
8. 最终发现是canvas的内部机制导致。使用html5的canvas进行绘制时，内部计算宽度和高度，是依赖于canvas的width以及height属性的。通常我们在使用js对canvas进行操作时，会使用css的方式修改其宽高，这种方式让canvas看起来的大小是没有问题的，也是我们所需要的。但是如果并未修改其width以及height属性时，内部计算时，它还会按照老的width和height去计算。
9. 解决方案：抛弃css的方式设置canvas的宽度以及高度。使用width和height。