侧边栏壁纸
  • 累计撰写 89 篇文章
  • 累计创建 482 个标签
  • 累计收到 69 条评论

目 录CONTENT

文章目录

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

火星人
2021-12-10 / 1 评论 / 0 点赞 / 956 阅读 / 0 字 / 正在检测是否收录...
  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。
0

评论区