目標
透過色付きpngを読み込んで、その画像の縁に沿ってラインを引きます。
今回の方法はブラウザでもnode上で動くnode-canvasでも使える方法です。
コード
一例として、読み込んだImageの縁に黒いラインをつける。
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
// Imageオブジェクトを読み込む。今回はネット上の画像を使う。
// node-canvasの場合`const img = await loadImage(imagePath)`とかで可能
const img = new Image;
img.onload = draw;
img.src = "http://i.stack.imgur.com/UFBxY.png";
const s = 10; // thickness scale
const x = 0; // final position
const y = 0;
function draw() {
for (let i = 0; i < 360; i++)
ctx.drawImage(img, x + Math.sin(i) * s, y + Math.cos(i) * s);
ctx.globalCompositeOperation = 'source-in';
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 合成モードを'source-over'に戻して上書き
ctx.globalCompositeOperation = 'source-over';
ctx.drawImage(img, 0,0,img.width, img.height);
}
参考
Draw outline from image
↧