拼图 canvas分割 dom拖拽 pc 移动端

参考：Canvas drag 实现拖拽拼图小游戏

参考的案例，不支持手机端。总结下实现过程中遇到的小坑。

gitHub: https://github.com/WppFrontEnd/puzzle

大概步奏分为三部分：

1. cavas 分割图片

2. 图片乱序

3. 排序图片

其中1和2都是参考了Canvas drag 实现拖拽拼图小游戏。

代码主要如下：

1. cavas 分割图片

segmentImg: function(puzzleImg){
            var index =0;
            divisionNum =3; 
            var imgHeight =  puzzleImg.height;
            var imgWidth = puzzleImg.width;
            var sigelH = imgHeight/divisionNum;
            var sigelW = imgWidth/divisionNum;
            this.canvas.height = sigelH;
            this.canvas.width  = sigelW;    
            for(var i=0;i<divisionNum;i++){
                for(var j=0;j<divisionNum;j++){
                    posX = sigelW * j+(5*j);
                    posY = sigelH * i+(5*i);
                    this.context.drawImage(puzzleImg, sigelW * j, sigelH * i, sigelW, sigelH, 0, 0, sigelW, sigelH);
                    this.imgCanvasList[index].src= this.canvas.toDataURL('image/jpeg');
                    this.imgCanvasList[index].id=index;
                    index++;                    
                }
            }
        }

canvas分割图片