使用HTML5和JavaScript在可拖动画布上绘制

Question

我目前正在创建后期注释。您可以通过按钮添加笔记。 你可以点击那些笔记，当你想绘制它们。

问题是，当我想在画布上画画时，我只能在画布的左上角进行画布。我认为上下文的注册点存在问题。

当我拖动它时，如何让上下文跟随画布？

Answer 1

得到补偿你的元素的使用：

  function getOffset(el) { 
       var _x = 0; 
       var _y = 0; 
       while(el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) { 
        _x += el.offsetLeft - el.scrollLeft; 
        _y += el.offsetTop - el.scrollTop; 
        el = el.parentNode; 
       } 
       return { 
        top : _y, 
        left : _x 
       }; 
      } 

其中EL是你的注意元素。