jquery - 在 Canvas 上方绘制选区时的偏移

Question

我正在尝试在 Canvas 上方绘制一个选择矩形，以指示用户正在选择的位置。为了实现这一点，我有一个主容器，它有一个 Canvas 和一个根据鼠标事件调整的绝对定位的 div。在 mouseup 事件中，我获取 x、y、宽度、高度，并使用这些精确坐标在 Canvas 上调用 fillRect()。问题是 Canvas 上的矩形上下移动了几个像素。这可能是我的 CSS 的问题吗？

Here is a fiddle

<div id="canvasContainer">

   <canvas width="300" height="300" id="surface"></canvas>

   <div id="selectionRect">
        <span id="select"></span>
   </div>

  <div class="selectionOutline">
        <span></span>
   </div>

</div>

Answer 1

偏移量是主体的边距。在 CSS 页面上添加:

body {
  margin:0px;
}

或者您可以从 Canvas 位置偏移正文边距距离。