SYNCERのロゴ
アイキャッチ画像

切り抜く方法

Canvasで画像などをパス通りに切り抜きたい時は、コンテキストのclip()を利用しましょう。

サンプルコード

切り抜くにはパスを指定してclip()を実行して下さい。パスの指定方法は図形などをレンダリングする時と同じです。注意点として、切り抜きは描画する前に実行しましょう。

// element = <canvas width="200" height="200"></canvas>
var context = element.getContext( "2d" ) ;

// 切り抜き (事前に実行すること)
context.beginPath() ;
context.arc( 100, 100, 80, 0 * Math.PI / 180, 360 * Math.PI / 180 ) ;
context.clip() ;

// 画像を描画
var url = "./image.png" ;
var image = new Image() ;
image.onload = function () {
	context.beginPath() ;
	context.drawImage( this, 0, 0, 400, 400, 0, 0, 200, 200 ) ;
}
image.src = url ;

デモ

違うパスで切り抜いた例です。

円形に切り抜き

// element = <canvas id="target" width="200" height="200"></canvas>
var element = document.getElementById( "target" ) ;
var context = element.getContext( "2d" ) ;

context.beginPath() ;
context.arc( 100, 100, 80, 0 * Math.PI / 180, 360 * Math.PI / 180 ) ;
context.clip() ;

var url = "./image.png" ;
var image = new Image() ;
image.onload = function () {
	context.beginPath() ;
	context.drawImage( this, 0, 0, 400, 400, 0, 0, 200, 200 ) ;
}
image.src = url ;

200x200のキャンパスです。

三角形に切り抜き

// element = <canvas id="target" width="200" height="200"></canvas>
var element = document.getElementById( "target" ) ;
var context = element.getContext( "2d" ) ;

context.beginPath() ;
context.lineTo( 200, 0 ) ;
context.lineTo( 0, 200 ) ;
context.lineTo( 0, 0 ) ;
context.clip() ;

var url = "./image.png" ;
var image = new Image() ;
image.onload = function () {
	context.beginPath() ;
	context.drawImage( this, 0, 0, 400, 400, 0, 0, 200, 200 ) ;
}
image.src = url ;

200x200のキャンパスです。

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年8月5日 (土)
コンテンツを公開しました。