[Edge.jsライブラリ] 輪郭の形状を指定する
説明
Edge.jsライブラリで輪郭の形状を指定するには、imgタグのスタイルシートクラス名にedgesとimaskを指定します。imaskの直後に配列で指定した番号を指定します。輪郭の画像はmask2load配列にマスク画像のURLを指定します。その配列の要素番号をimaskの直後の番号として指定することで輪郭の形状を指定することができます。
サンプルプログラム
【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/edge.js"></script>
</head>
<body>
<h1>画像の輪郭を処理する</h1>
<div>
<img src="images/sample.jpg" width="480" height="270" class="edges imask1">
</div>
</body>
</html>
【sample.js】
mask2load[0] = "masks/8bit/crippleedge.png";
mask2load[1] = "masks/8bit/frizzedge.png";
mask2load[2] = "masks/8bit/softedge.png";
mask2load[3] = "masks/8bit/splatteredge.png";
mask2load[4] = "masks/8bit/waveedge.png";