Canvas——实现地图拖拽功能

在画布上拖拽地图，让地图跟着鼠标焦点移动，即需要每一帧清除画布，在指定点进行地图重绘的操作。根据鼠标的位置移动，换算出地图重绘的起始点即可。

                            

如图所示，A(x0, y0)点为地图拖拽前的绘图起始点，A1(x1, y1)点为地图拖拽后的绘图起始点，假设鼠标在x轴方向移动的位移为offsetX，在y轴方向移动的位移为offsetY，则有

                                                                 

                                                               

清除画布后重新于点A1(x1, y1)处重绘地图即可实现地图的拖拽功能。

x1 = x0 + offsetX;
y1 = y0 + offsetY;
this.ctx.clearRect(x0, y0, this.width, this.height); 
this.ctx.drawImage(
            img, //规定要使用的图片
            x1 , y1,//在画布上放置图像的 x 、y坐标位置。
            this.width, this.height //要使用的图像的宽度、高度
          );