イメージ画像のシャッフル

次の例は、画像をピースに分割した後、シャッフルする。

ソースコード（開く）

[HTML]
<p><img src="https://shiba-sub.sakuraweb.com/wp-content/uploads/media/Sample07.jpg" width="600" height="450" id="pic"></p>
<p><button id="shuffle">シャッフル</button></p>

[JavaScript]
document.addEventListener('DOMContentLoaded',function(){
  // img要素
  var img = document.querySelector('#pic');
  // button要素
  var btn = document.querySelector('#shuffle');
  // button要素にclickイベントのリスナーをセット
  btn.addEventListener('click',function(event){
    event.target.disable = true;
    shuffle(img);
  },false);
},false);
// イメージをシャッフル
function shuffle(img){
  // イメージの幅と高さ
  var w = parseInt(img.width); 
  var h = parseInt(img.height);
  // canvas要素を生成
  var canvas = document.createElement('canvas');
  canvas.width = w;
  canvas.height = h;
  var context = canvas.getContext("2d");
  // img要素をcanvas要素に置き換える
  img.parentNode.insertBefore(canvas,img);
  img.parentNode.removeChild(img);
  // ピースの分割数
  var n1 = 4;  // 横
  var n2 = 3;  // 縦
  // ピースのサイズ
  var pw = w / n1;
  var ph = h / n2;
  // 各ピースの左上の座標を配列に格納
  var pp = [];
  for( var y=0; y<h; y+=ph ){
    for( var x=0; x<w; x+=pw ){
       pp.push([x,y]);
    }
  }
  // 各ピースをランダムに並び替え
  var rpp = [];
  while( pp.length>0 ){
    var el = pp.splice(Math.floor(Math.random() * pp.length),1);
    rpp.push(el[0]);
  }
  // 各ピースをCanvasに貼り付ける
  for( var y=0; y<h; y+=ph ){
    for( var x=0; x<w; x+=pw ){
      // ピースを貼り付ける
      var p = rpp.shift();
      context.drawImage(img,p[0],p[1],pw,ph,x,y,pw,ph);
      // ピースに影を付ける
      draw_shadow(context,x,y,pw,ph);
    }
  }
}
// ピースに影を付ける
function draw_shadow(context,x,y,w,h){
  // 影の幅
  var sw = 1;
  context.lineWidth = sw;
  var s = sw/2;
  // 左側と上側を描画
  context.beginPath();
  context.moveTo(x+s,y+h-s);
  context.lineTo(x+s,y+s);
  context.lineTo(x+w-s,y+s);
  context.strokeStyle = "rgba(255,255,255,0.3)";
  context.stroke();
  // 右側と下側を描画
  context.beginPath();
  context.moveTo(x+w-s,y+s);
  context.lineTo(x+w-s,y+h-s);
  context.lineTo(x+s,y+h-s);
  context.strokeStyle = "rgba(0,0,0,0.3)";
  context.stroke();
}