侧边栏壁纸
博主头像
钱学超博主等级

火星人,1万小时法则的忠实拥趸。技术宅,象棋和羽毛球爱好者,马拉松PB成绩:4小时零8分。坚持认为算法是计算机的灵魂。喜欢解决问题,喜欢手工,喜欢与朋友们聊天喝酒吹牛X。

  • 累计撰写 54 篇文章
  • 累计创建 306 个标签
  • 累计收到 52 条评论
标签搜索

目 录CONTENT

文章目录

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

钱学超
2021-12-10 / 2 评论 / 0 点赞 / 230 阅读 / 404 字 / 正在检测是否收录...
  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

评论区