Canvasで画像を加工しよう -円環の理に導かれて-

function sketch(){
  // (1) 画像をキャンバス差し替える
  var image = document.getElementsByTagName('img')[0];
  var object = image.parentNode;
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext("2d");
  canvas.style.height = image.height+'px';
  canvas.style.width = image.width+'px';
  canvas.height = image.height;
  canvas.width = image.width;
  canvas.src = image.src; 
  object.replaceChild(canvas,image);
  ctx.drawImage(image, 0, 0);

  // (2) クリックイベントを監視して、shot()を実行する
  // ※ attachEventはIE用
  if(canvas.addEventListener){
    canvas.addEventListener("click", function(e){
      console.log(e);
      console.log(e.offsetY);
      shot(e, ctx);
    }, false);
  } else {
    canvas.attachEvent("click", function(e){
      shot(e, ctx);
    });
  }


  // ボタンのクリックイベントを監視
  var button = document.getElementsByTagName('button')[0];
  if(button.addEventListener){
    button.addEventListener("click", function(e){
      call(ctx, image);
    }, false);
    console.log(ctx);
  } else {
    button.attachEvent("click", function(e){
      call(ctx, image);
    });
  }


  //座標クリックイベント
  console.log(canvas.getBoundingClientRect().top);
  var clientX = canvas.getBoundingClientRect().left;
  var clientY = canvas.getBoundingClientRect().top;
  var e = document.createEvent('MouseEvents');
  e.initMouseEvent(
    'click', // type
    true, // bubbles
    true, // cancelable
    window, // view
    1, // detail（クリック数）
    0, // screenX（デバイス全体における座標）
    0, // screenY
    clientX+20, // clientX（ブラウザ表示域における座標）
    clientY+20, // clientY
    false, // ctrlKey
    false, // altKey
    false, // shiftKey
    false, // metaKey
    0, // button（0 が左、1 が中、2 が右クリック）
    null // relatedTarget
  );
  var n = canvas || document.body // クリックのターゲットにしたいノード
  n.dispatchEvent(e);


}




function shot(e, ctx){
  // (3) クリックした座標を中心に複数の円形を描画する
  // 合成処理"destination-out"で描画した範囲で元の画像を消去している
  ctx.globalCompositeOperation = 'destination-out';
  var cx = e.offsetX;
  var cy = e.offsetY;
  var d = 160;
  var bullets = 32;
  var i;
  var x, y, r;
  var radius ,angle;
  console.log('xy=' + cx + ':' + cy);
  for(i=0; i<bullets; i++){
    radius = Math.random() * d;
    angle =  Math.random() * Math.PI * 2;
    x = cx + radius * Math.sin(angle);
    y = cy + radius * Math.cos(angle);
    r = Math.random() * 10 + 5;

    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI * 2, false);
    ctx.fill();
  }
}



function call(ctx, image){
  // (4) 復活の呪文
  // 再度、画像を呼び出します。
  ctx.globalCompositeOperation = 'source-over';
  ctx.drawImage(image, 0, 0);
}


function clipCircle(ctx){
  // 同じ表現をclipでできないかと思ったが、
  // 透過のピクセルで上書きするputImageData()は円形のclip()が効かず、
  // ただの四角い透過になってしまう。残念。
  var x=80;
  var y=80;
  var r=30;
  ctx.beginPath();
  ctx.arc(x, y, r, 0, Math.PI * 2, false);
  ctx.clip();
  var img = ctx.createImageData(80, 80);
  ctx.putImageData(img, x, y);
}




if(window.addEventListener){
  window.addEventListener("load", sketch, false);
} else{
  window.attachEvent("onload", sketch);
}

img{
  background-color:#b9b9b9;
}
canvas{
  background-color:#9b9b9b;
}
p{
  font-family: monospace;
  margin:12px;
}
em{
  font-weight:bold;
  font-size:24px;
}

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-canvas-composite/