クリッピング領域内へ画像描画

クリッピング領域内へ画像を描画
クリッピング領域を指定してから
drawImage()を呼び出すと
クリッピング領域内に画像が描画される
では、ソース
document.getElementById(“draw3”).addEventListener(“click”,fuction(){
context.save(); //状態保存
context.beginPath();
context.strokeStyle=”orange”; //色指定
//クリッピング領域指定
/*arcで円を描く
パラメータは
中心x座標
中心y座標
半径
開始角度
終了角度
(角度はラジアンなので、180度=π
Math.PIでπになる
もし、円を描くなら
Math.PI*2
となる)
フラグ(trueなら時計まわり、falseなら反時計まわり)
context.arc(360,270,60,0,Math.PI*2,false);
context.clip();
context.drawImage(imageObj,300,20);
context.restore();
},true);

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です