Js实现鼠标拖动效果
拖动的对象必须使用position:absolute;绝对定位，使其脱离文档流，对对象准确定位。
一、实现思路：
获取拖动对象的初始位置坐标（oX，oY），监听鼠标按下时记录鼠标初始位置坐标（sX,sY）和鼠标移动时的坐标（mX，mY），可得对象在移动中的横坐标（oX + mX -sX），纵坐标（oY + mY-sY）。然后只需在监听鼠标移动事件中，更改当前对象的left和top值为移动中的坐标即可。
放开鼠标后固定其位置：
可以设置一个flag值，当鼠标按下时flag设为true，鼠标移动事件中if判断flag值为true时才能设置left和top值。放开鼠标后，flag设为false，此时便不会在执行图片移动的的功能。
二、创建离屏canvas
离屏canvas就是在js中创建一个canvas节点，并对该canvas创建2d绘图环境，执行绘制操作等，即这个canvas并不存在于页面之中。
离屏canvas可以用来存放临时性的图像信息。
使用离屏canvas的4个步骤：
- 创建用做离屏canvas的元素。
- 设置离屏canvas的宽度与高度。
- 在离屏canvas之中进行绘制
- 将离屏canvas的全部或一部分内容复制到正在显示的canvas之中。
三、canvas中实现图像根据图像中心旋转
绘图环境的坐标系：canvas左上角为坐标原点( 0,0 )，x轴往右为正，y轴向下为正。反之为负。
用到2d绘图环境中的drawImage( )、translate( )、rotate( )、clearRect ( )方法
drawImage( )方法：将图片绘制到目标canvas上，有如下3套参数
- drawImage( image, dx, dy)：image为原图片对象，dx和dy为在canvas上开始绘制坐标位置。
- drawImage( image, dx, dy, dw, dh)：前面的同上，dw,和dh为要绘制图片的宽和高。
- drawImage( image, sx, sy, sw, sh, dx, dy, dw, dh)：sx和sy为从原图像开始截取的坐标，sw和sh是需要截取的宽和高。其他同上。
第1、2方法会将图像完整的绘制到canvas的指定位置，绘制时会根据目标区域宽高进行缩放。
第3个方法会将整张图或者一部分绘制的指定位置，也会进行缩放。
translate( x, y )方法重新定义绘图环境的原点坐标，坐标原点起参照作用，默认是(0,0)为坐标原点。
rotate( a*Math.PI/180 )方法的作用是将绘图环境旋转a度，不是canvas元素。
clearRect ( x, y, w, h )方法清除目标区域内容，x和y为开始清除的起始坐标，w和h为需要清除的区域宽高。
实现过程：
将图像中心点与canvas中心重合，实现中心旋转图像。
- translate( canvas.width/2, canvas.height/2 )方法修改绘图坐标原点为canvas中心点。
- 绘制图像，使其在位于canvas中央：
drawImage( img , -img.width/2,-img.height/2,img.width,img.height )
因为此时原点坐标为( canvas.width/2, canvas.height/2 )，所以将绘图坐标定于( -img.width/2,-img.height/ ) 即可将绘制起始点定图像的左上角。 - rotate( 角度 )，旋转绘图环境。
- 用clearRect ( -canvas.width/2,-canvas.height/2,canvas.width,canvas.height )清除整块canvas区域内容。
- 绘制图像：drawImage( img , -img.width/2,-img.height/2,img.width,img.height )。
此时绘制图像即是按某角度旋转后的图像。