Javascript 如何像拖放一样移动画布？

我需要通过触摸移动整个画布，就像拖放一样

画布的位置应该是从

    flattenCanvas.height = canvas.height = SCREEN_HEIGHT - menu.container.offsetHeight;
canvas.style.position = 'absolute';
canvas.style.top = menu.container.offsetHeight+'px';
 canvas.style.left = -(menu.container.offsetHeight)/2+'px';
context = canvas.getContext("2d");

画图或滚动的触感来自于此

else if(event.touches.length == 1)  ////one finger scrolling
{

       canvas.style.top = (((event.touches[0].pageY)))+'px';
      canvas.style.left = (((event.touches[0].pageX)))+'px';

}

从上一个代码中，我可以通过一次触摸移动画布，但它不是真正的拖动。 如何修复画布屏幕移动

这是webapp的演示

基于，您要处理的事件是

touchmove

您问题中的代码似乎位于

touchstart

处理程序中；只需在

touchmove

处理程序中执行相同的代码，即可在“拖动”过程中持续更新

更新 您试图做的是通过触摸事件的“当前”（

touchmove

）和“开始”（

touchtstart

）位置之间的差异来偏移目标元素（在本例中为

canvas

元素）。为此，您应该在

touchstart

处理程序中捕获目标和触摸的位置。然后，在您的

touchmove

处理程序中，获取触摸位置的差异，并将其添加到目标的开始位置。这可能看起来像：

// Get your draggable element from the DOM
var draggable = document.getElementById('draggable');

// Set initial position.
draggable.style.position = 'relative'; // 'absolute' also works.
draggable.style.top = '0';
draggable.style.left = '0';

var targetStartX, targetStartY, touchStartX, touchStartY;

// Capture original coordinates of target and touch
function dragStart(e) { 
  targetStartX = parseInt(e.target.style.left);
  targetStartY = parseInt(e.target.style.top);
  touchStartX  = e.touches[0].pageX;
  touchStartY  = e.touches[0].pageY;
}
function dragMove(e) { 
  // Calculate touch offsets
  var touchOffsetX = e.touches[0].pageX - touchStartX,
      touchOffsetY = e.touches[0].pageY - touchStartY; 
  // Add touch offsets to original target coordinates,
  // then assign them to target element's styles. 
  e.target.style.left = targetStartX + touchOffsetX + 'px'; 
  e.target.style.top  = targetStartY + touchOffsetY + 'px';
}
draggable.addEventListener('touchstart', dragStart);
draggable.addEventListener('touchmove',  dragMove);

---

@你已经在问代码了。但是，这与这个问题有什么关系呢？我刚刚检查了这个例子。它就像我的代码一样。当我选择那个框时，它总是从它的x0，y0开始，我想从任意点选择它，然后像触摸滚动网页一样从那个点移动它