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 //要使用的图像的宽度、高度 );