輪郭の形状を指定する

Edge.jsでは輪郭の形状を指定することができます。ダウンロードして展開されたedgeフォルダ内にはmaskフォルダがあり、この中にあるマスク画像が適用されます。マスク画像は任意のものを利用できますが、これについては後で解説します。まず、輪郭に指定するマスク画像のURLを決められた配列内に設定します。これは以下のようになります。

<script type="text/javascript"><!--
    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"; 
// --></script>

次に<img>タグのclass属性にimaskクラスを指定します。このクラス名の後に番号を指定します。この番号は上記の配列で設定した画像と対応するためimask0と指定するとmask2load[0]に設定したマスク画像が、imask3と指定するとmask2load[3]に設定したマスク画像が適用されます。実際には以下のように指定します。

<img src="photo/003.jpg" class="edges imask2" width="192" height="108" alt="富山湾">

最初から入っているマスク画像を全て適用させたものがサンプル02になります。

サンプル02の実行結果

サンプル02

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
        <title>edge.jsサンプル</title>
        <script type="text/javascript" src="js/edge.js"></script>
        <script type="text/javascript"><!--
            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"; 
        // --></script>
    </head>
    <body>
    <h1>edge.jsサンプル</h1>
        <div>
            <img src="photo/001.jpg" class="edges imask0" width="192" height="108" alt="富士山">
            <img src="photo/002.jpg" class="edges imask1" width="192" height="108" alt="夕焼け">
            <img src="photo/003.jpg" class="edges imask2" width="192" height="108" alt="富山湾">
            <img src="photo/004.jpg" class="edges imask3" width="192" height="108" alt="白糸の滝">
            <img src="photo/005.jpg" class="edges imask4" width="192" height="108" alt="高原">
        </div>
    </body>
</html>

また、輪郭のぼかし幅を指定することもできます。輪郭のぼかし幅はclass属性にisizeを指定し直後に0～100までの数値を付加し、同時にinbuiltを指定します。isizeの値は大きくなるほどぼかし幅が広がります。実際のスクリプトはサンプル03になります。

サンプル03の実行結果。輪郭のぼかし幅を指定している

サンプル03

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
        <title>edge.jsサンプル</title>
        <script type="text/javascript" src="js/edge.js"></script>
    </head>
    <body>
    <h1>edge.jsサンプル</h1>
        <div>
            <img src="photo/001.jpg" class="edges isize05 inbuilt" width="192" height="108" alt="富士山">
            <img src="photo/002.jpg" class="edges isize10 inbuilt" width="192" height="108" alt="夕焼け">
            <img src="photo/003.jpg" class="edges isize20 inbuilt" width="192" height="108" alt="富山湾">
            <img src="photo/004.jpg" class="edges isize40 inbuilt" width="192" height="108" alt="白糸の滝">
            <img src="photo/005.jpg" class="edges isize100 inbuilt" width="192" height="108" alt="高原">
        </div>
    </body>
</html>