HTML5 Canvas触摸点绘制圆形坐标偏移问题求助

Canvas 存在两套互不关联的尺寸规则：

1. 页面显示尺寸：由CSS的width/height属性控制，是canvas元素在页面上占据的实际大小
2. 画布像素尺寸：由canvas标签原生的width/height属性控制，是绘图时的坐标基准
   你当前只在CSS中设置了canvas的显示尺寸为600600，但没有设置原生属性，canvas默认的画布像素尺寸为300150。浏览器会把300150的画布内容拉伸填充到600600的显示区域，直接导致绘图坐标和实际触摸坐标出现比例偏移。

1. 对齐画布像素尺寸和显示尺寸 #

二选一即可：

• 直接在HTML的canvas标签上添加原生宽高属性：

<h1>The TouchEvent</h1>
<canvas id="myCanvas" width="600" height="600"></canvas>

• 或在JS初始化时动态设置画布尺寸：

function startup() {
  var myCanvas = document.getElementById("myCanvas");
  // 新增以下两行，对齐画布尺寸和CSS显示尺寸
  myCanvas.width = 600;
  myCanvas.height = 600;
  
  myCanvas.addEventListener("touchstart", handleStart, false);
  myCanvas.addEventListener("touchend", handleEnd, false);
  myCanvas.addEventListener("touchcancel", handleCancel, false);
  myCanvas.addEventListener("touchmove", handleMove, false);
}

2. 可选优化：坐标适配缩放比例 #

如果后续可能修改canvas的CSS显示尺寸，建议在计算触摸坐标时乘以缩放系数，避免再次出现偏移，修改handleStart中的绘图逻辑：

function handleStart(e) {
  e.preventDefault();
  
  var myCanvas = document.getElementById("myCanvas");
  var ctx = myCanvas.getContext("2d");
  var touches = e.changedTouches;
  var rec = myCanvas.getBoundingClientRect();
  // 新增缩放系数计算
  var scaleX = myCanvas.width / rec.width;
  var scaleY = myCanvas.height / rec.height;
  
  for (var i = 0; i < touches.length; i++) {
    ongoingTouches.push(copyTouch(touches[i]));
    
    var color = colorForTouch(touches[i]);
    // 用缩放后的坐标绘图
    var drawX = (touches[i].clientX - rec.left) * scaleX;
    var drawY = (touches[i].clientY - rec.top) * scaleY;
    
    ctx.beginPath();
    ctx.arc(drawX, drawY, 4, 0, 2 * Math.PI, false);
    ctx.fillStyle = color;
    ctx.fill();
  }
}

内容的提问来源于stack exchange，提问作者Nick