いろんな形のマスクをかけて画像をくりぬいてみる。
下準備
とりあえずマスクをかける画像を描画する。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Language" content="ja">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0,minimal-ui">
<title>mask</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript" src="./script.js"></script>
</body>
</html>
script.js
(function () {
var canvas = document.getElementById('canvas');
canvas.width = 960;
canvas.height = 540;
var context = canvas.getContext('2d');
var bgImg = new Image();
bgImg.onload = function () {
context.globalCompositeOperation = 'source-over';
context.drawImage(bgImg, 0, 0, canvas.width, canvas.height);
};
bgImg.src = './bg.jpg';
})();
ここまでで↓の画像が表示されるので準備完了。
マスクをかける
合成処理を決めるglobalCompositeOperationプロパティを変更して上書き描画することでマスクをかける。
globalCompositeOperationについてはHTML5.JP - globalCompositeOperation プロパティがわかりやすい。
現状、globalCompositeOperationの値はsource-over(デフォルト値)で、既にdrawImageで画像が描画されている。
これに対してマスクをかけるには、globalCompositeOperationをdestination-inにしてから適当な形を描画すればよい。
script.js
(function () {
var canvas = document.getElementById('canvas');
canvas.width = 960;
canvas.height = 540;
// 中央にマスクをかけるための値を変数にいれておく
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var context = canvas.getContext('2d');
var bgImg = new Image();
bgImg.onload = function () {
context.globalCompositeOperation = 'source-over';
context.drawImage(bgImg, 0, 0, canvas.width, canvas.height);
drawMask();
};
bgImg.src = './bg.jpg';
var drawMask = function () {
// globalCompositeOperation に destination-in を設定
context.globalCompositeOperation = 'destination-in';
var size = 200;
var half = size / 2;
// 矩形を描画
context.fillRect(centerX - half, centerY - half, size, size);
};
})();
すると↓のように、あとから描画した部分のみ画像が表示される。
マスクの形を変える
globalCompositeOperationを変更したあとの描画内容次第でマスクの形が決まる。
arcや、pathを使ってマスクを自由な形にすることもできる。
ark
script.js
var drawMask = function () {
context.globalCompositeOperation = 'destination-in';
var size = 200;
// 円を描画
context.arc(centerX, centerY, size, 0, Math.PI * 2);
context.fill();
};
path
script.js
var drawMask = function () {
context.globalCompositeOperation = 'destination-in';
// pathで三角形を描画
context.beginPath();
context.moveTo(0, 0);
context.lineTo(centerX, centerY);
context.lineTo(canvas.width, 0);
context.closePath();
context.fill();
};
マスクに画像を使う
pathを使えばマスクをある程度自由な形にすることができるが、複雑なマスクをかけるのは大変。
複雑な形のマスクをかけたい場合は、透過画像を用いると簡単にできる。
用意するのは↓のような、マスクとなる部分以外が透過になっている画像。透過でない部分の色は意識しなくておｋ。
この画像をいままでと同じように描画する。
script.js
var drawMask = function () {
context.globalCompositeOperation = 'destination-in';
// 星型の透過画像を描画
var maskImg = new Image();
maskImg.onload = function () {
context.drawImage(maskImg, centerX - (maskImg.width / 2), centerY - (maskImg.height / 2), maskImg.width, maskImg.height);
};
maskImg.src = './star.png';
};
すると星型のマスクがかかる。
画像を変えれば、更に複雑なマスクをかけることも可能。
ﾊﾊｯ