HTML5のCanvas APIを使って画像の切り抜きを行ってみた

こんにちは、雑記ラビリンスです

今回は、はてなぶろぐで使う画像をHTML5のCanvas APIを使って画像の切り抜きを行いましたので

その紹介をいたします。

ソースコードはこちらになります。

$(function(){
  if(HTMLCanvasElement) {
    var cv = $('#canvas').get(0);
    var c = cv.getContext('2d');
    c.beginPath();
    c.arc(120,120,90,0,2*Math.PI,false);
    c.stroke();
    c.clip();
    $('<img>')
    .attr('src','ブログで使いたい画像ファイルのパス')
    .on('load',function(){
    c.drawImage(this,0,0,240,240);
    });
  }
});
<canvas id="canvas" with="300" height="300"></canvas>

こちらがその結果

円で切り抜いて表示することができました。

おしまい