JavaScript学习 -- 图片切片混淆（二）

一、通过上篇文章的正则表达式获取所有坐标，并粗正字符串

    let str="234,25,0,75,39,50,234,75,156,75,156,0,26,50,143,75,13,75,208,0,26,75,91,75,117,0,234,0,221,0,234,50,169,25,169,0,143,50,52,50,221,25,221,75,104,25,91,50,156,25,104,75,182,50,78,75,65,25,26,25,78,0,247,75,0,50,169,50,52,25,195,25,130,50,247,50,39,25,195,0,0,0,221,50,208,75,247,0,91,0,104,50,208,25,182,75,13,0,13,50,65,50,91,25,117,25,130,75,130,25,247,25,78,50,52,0,182,0,182,25,143,25,156,50,143,0,65,75,117,50,117,75,0,25,26,0,195,75,65,0,39,0,208,50,52,75,39,75,169,75,13,25,78,25,130,0,104,0,195,50";

二、通过“，”进行切割，可以获取任意一个坐标

 let 切割=str.split(",")

三、图片排序的时候，x轴每次增加13，增加到260，x轴变成0，从第二行开始

 let x=0;
if(x>=260)
{
    x=0;
}
 x+=13;

四、图片排序的时候，当排到20的倍数的时候，y+25，

 let 计数=0;
 let y=0;
  if (计数%20===0)
  {
     y+=25;
  }

五、最终代码如下

<script>
    let str="234,25,0,75,39,50,234,75,156,75,156,0,26,50,143,75,13,75,208,0,26,75,91,75,117,0,234,0,221,0,234,50,169,25,169,0,143,50,52,50,221,25,221,75,104,25,91,50,156,25,104,75,182,50,78,75,65,25,26,25,78,0,247,75,0,50,169,50,52,25,195,25,130,50,247,50,39,25,195,0,0,0,221,50,208,75,247,0,91,0,104,50,208,25,182,75,13,0,13,50,65,50,91,25,117,25,130,75,130,25,247,25,78,50,52,0,182,0,182,25,143,25,156,50,143,0,65,75,117,50,117,75,0,25,26,0,195,75,65,0,39,0,208,50,52,75,39,75,169,75,13,25,78,25,130,0,104,0,195,50";
    let 切割=str.split(",")
    let 图片=new Image();
    图片.src="./123.png";
    图片.onload=function (){
        let cv=document.getElementById("cv元素").getContext('2d');
        let 计数=0;
        let x=0;
        let y=0;
        for (let i = 0; i < 切割.length; i+=2) {
            计数++;
            if(x>=260)
            {
                x=0;
            }
            cv.drawImage(图片,切割[i],切割[i+1],13,25,x,y,13,25)
            x+=13;
            if (计数%20===0){
                y+=25;
            }
        }
    }
</script>