JavaScript函数内Canvas定位异常问题求助

我来帮你排查这个定位失效的问题～核心原因其实是你用错了获取图片位置的属性！

问题根源：错误的位置属性 #

原生的HTML图片元素（HTMLImageElement）并没有标准的x和y属性来表示元素的定位偏移，你代码里的img.x和img.y其实是无效的——虽然控制台能打印出数值，但这大概率是浏览器的非标准特性或者你之前误加的自定义属性，并不是元素实际的布局位置值。这就导致你给Canvas设置的left和top其实是错误的，自然不会生效。

解决方案：使用标准的位置获取方法 #

下面给你两种可靠的修正方案：

方案1：基于父元素的相对偏移（推荐）

首先给父容器#rightPanel添加相对定位，这样Canvas的绝对定位会以它为基准：

#rightPanel { position: relative; }
.coveringCanvas { position: absolute; }

然后修改drawPoints函数里的定位代码，使用标准的offsetLeft和offsetTop属性（表示元素相对于父定位元素的偏移）：

function drawPoints(data) {
  var img = document.getElementById('worldMap');
  var canvas = document.getElementById('heatmap');
  
  canvas.width = img.width;
  canvas.height = img.height;
  // 替换错误的x/y为offsetLeft/offsetTop
  canvas.style.left = img.offsetLeft + "px";
  canvas.style.top = img.offsetTop + "px";
  
  simpleheat('heatmap').data(data).radius(30,25).draw();
}

方案2：基于视口的绝对位置

如果不想修改父容器的定位，可以用getBoundingClientRect()获取图片相对于视口的位置，再加上页面滚动偏移，确保Canvas定位准确：

function drawPoints(data) {
  var img = document.getElementById('worldMap');
  var canvas = document.getElementById('heatmap');
  
  canvas.width = img.width;
  canvas.height = img.height;
  
  // 获取图片的视口位置，加上滚动偏移
  const imgRect = img.getBoundingClientRect();
  canvas.style.left = (imgRect.left + window.scrollX) + "px";
  canvas.style.top = (imgRect.top + window.scrollY) + "px";
  
  simpleheat('heatmap').data(data).radius(30,25).draw();
}

额外保险：确保图片加载完成后再定位 #

虽然你用的是base64数据URI（图片会同步加载），但为了避免极端情况（比如图片加载延迟导致尺寸/位置不准确），可以在设置图片src后监听onload事件，再执行绘制：

// 修改Ajax回调里的代码
$.post("/Heatmap/getHeatmap", { beginDate: begin, endDate: end }, function (data) {
  map = data["mapImage"];
  var img = document.getElementById('worldMap');
  // 监听图片加载完成事件
  img.onload = function() {
    positions = data["positions"];
    drawPoints(positions);
  };
  img.src = arrayBufferDataUri(map);
});

为什么控制台执行正常？ #

你在控制台执行时，图片已经完全加载完成，布局稳定，而且可能你无意中用了正确的属性（比如直接输入img.offsetLeft），所以定位生效了，但代码里用了错误的x/y属性，导致函数执行时失效。

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