需求是，用户开始触摸canvas的时候，就绘制一个点，然后最后将几个点组合成一个框。但是我在编辑代码的时候发现：
ctx.arc(200, 200, 20, 0, 2 * Math.PI);
这个（200和200） 这个位置和我触摸区域完全不是同一个区域，我更改了画布的宽高：
.board {
width: 500px;
height: 400rpx;
} 发现，绘制的圆在屏幕的位置是不变的，但是我通过EventHandle 获取到的坐标是会发生变化的。
const x = e.touches ? e.touches[0].clientX : e.clientX; // 获取点击的 X 坐标
const y = e.touches ? e.touches[0].clientY : e.clientY; // 获取点击的 Y 坐标
这个问题感觉是两个坐标系没有相互转换导致的，但是我未找到应该如何对两个坐标系进行转换，麻烦知道的大佬告知一下，谢谢了，非常感谢
2 个回复
9***@qq.com (作者) - luoye啊
{
"_processed": true,
"changedTouches": [{
"clientX": 5,
"clientY": 425,
"force": 1,
"identifier": 0,
"pageX": 5,
"pageY": 476
}],
"currentTarget": {
"dataset": {},
"id": "",
"offsetLeft": 0,
"offsetTop": 474
},
"detail": {},
"mp": {
"@warning": "mp is deprecated",
"changedTouches": [{
"clientX": 5,
"clientY": 425,
"force": 1,
"identifier": 0,
"pageX": 5,
"pageY": 476
}],
"currentTarget": {
"dataset": {},
"id": "",
"offsetLeft": 0,
"offsetTop": 474
},
"detail": {},
"preventDefault": "function(){}",
"stopPropagation": "function(){}",
"target": {
"dataset": {},
"id": "canvas",
"offsetLeft": 0,
"offsetTop": 474
},
"timeStamp": 427115.62499999854,
"touches": [{
"clientX": 5,
"clientY": 425,
"force": 1,
"identifier": 0,
"pageX": 5,
"pageY": 476
}],
"type": "touchstart"
},
"preventDefault": "function(){}",
"stopPropagation": "function(){}",
"target": {
"dataset": {},
"id": "canvas",
"offsetLeft": 0,
"offsetTop": 474
},
"timeStamp": 427115.62499999854,
"touches": [{
"clientX": 5,
"clientY": 425,
"force": 1,
"identifier": 0,
"pageX": 5,
"pageY": 476
}],
"type": "touchstart"
}
是否是canvas 使用的是canvas 组件的相对定义，就是左上角是00，所以我获取到的Y 轴应该减去 offsetTop 才是我理想需要绘制的值。
7***@qq.com
解决了吗 我现在碰到的是canvas平移和缩放，现在是默认的0点在左上角，放大的话 绘制的线条会往左下角跑。我想让他双指中心放大。这个你解决了吗