Question

一个关于使用html5的canvas标签的问题

最近使用html5的canvas遇到一个坐标不统一的问题，如上图，在使用Chrome的手机浏览器模式时，虚线(C->A)是鼠标划过的路线，实线(D->B)是在canvas上显示的实际路线，就是说纵坐标不一样，横坐标不变；但是当我切换回电脑的普通浏览器模式的时候就不会出现上述的现象，路线CA跟BD重合；请问这是因为兼容问题吗？

Answer 1

你我怀疑你是直接用页面中鼠标的坐标值在canvas里边画线的。因为很明显你的鼠标实际的轨迹是从页面的左上角开始的，而你画线是从canvas的左上角开始的。

最好写一个坐标转换的函数，把全局坐标转换成canvas内部的坐标，并且这块儿可以单独拿出来测试，发现问题也好改。

追问

但是我使用普通浏览器模式运行的时候就没问题的