- 使用canvas进行图像绘制,可以绘制图像、文本、色块等等。但是坐标紊乱。
- 查看canvas的宽度和高度,均显示正常。
- 尝试绘制直线:(0,0) ==> (width,height)
- 发现并不是真实的对角线。
- 尝试绘制直线:(0,0) ==> (100,100)
- 发现画出来的居然是一个矩形,头大如斗。
- 查询各种文档,无果。
- 最终发现是canvas的内部机制导致。使用html5的canvas进行绘制时,内部计算宽度和高度,是依赖于canvas的width以及height属性的。通常我们在使用js对canvas进行操作时,会使用css的方式修改其宽高,这种方式让canvas看起来的大小是没有问题的,也是我们所需要的。但是如果并未修改其width以及height属性时,内部计算时,它还会按照老的width和height去计算。
- 解决方案:抛弃css的方式设置canvas的宽度以及高度。使用width和height。
版权归属:
钱学超
许可协议:
本文使用《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》协议授权
评论区