はじめに
最近、HTML5の記事をよく見かけるようになりました。次世代のHTML規格であるHTML5は、画像や動画などグラフィック関連の表現がサポートがされることで注目を集めています。
今回は、その中のcanvasタグに焦点を当ててみたいと思います。HTML5ではcanvasタグとJavaScriptを用いて、容易に2次元グラフィックを表現できるようになります。canvasタグはInternet Explorer 8ではサポートされていませんが、他のブラウザではサポートされており、表現力の点からも今後は普及していく方向に進むのではないでしょうか。
本記事では、canvasタグ実装とCurl実装の比較を交えて、Curlでの2次元グラフィックスについて紹介します。Curlでは当初より2次元グラフィックス、3次元グラフィックスを標準機能として提供しています。今回は、グラデーション表現とイメージの加工について説明していきたいと思います。
なお、文中のサンプルは添付のサンプルコードでも確認できます。
開発手順
- グラデーション表現
- イメージ加工
開発環境
- Curl RTE 7.0
1．グラデーション表現
canvasとの実装比較として、双方のイメージとソースコードを用いて説明していきます。まずは縦方向のグラデーションからです。
Curl実装
ソースコード（Sample¥001.dcurl）
{curl 7.0 applet}
{View
{Fill … 1
width = 2in, … 2
height = 2in,
background = {LinearGradientFillPattern … 3
{Fraction2d 0, 0}, … 4
{Fraction2d 1, 0},
{Spectrum.from-envelope … 5
"#C05050", 0.0,
"#C0C050", 0.5,
"#5050C0", 1.0
}
}
},
visibility = "normal",
{on WindowClose do
{exit}
}
}
canvas実装
ソースコード（Sample¥001.html）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>グラデーション（縦）</title>
<script type="text/javascript">
onload = function() {
draw();
};
function draw() {
var canvas = document.getElementById('base');
var context = canvas.getContext('2d');
context.beginPath();
var linerGrad = context.createLinearGradient(0, 0, 200, 0); … 2
linerGrad.addColorStop(0.0, "#C05050"); … 3
linerGrad.addColorStop(0.5, "#C0C050");
linerGrad.addColorStop(1.0, "#5050C0");
context.fillStyle = linerGrad; … 4
context.rect(0, 0, 200, 200); … 5
context.fill();
}
</script>
</head>
<body>
<header><h1>グラデーション（縦）</h1></header>
<canvas id="base" width="200" height="200"></canvas> … 1
</body>
</html>
最初なので各々のソースコードを説明します。
Curl実装
- Fillシェイプを生成します。
- Fillシェイプの大きさを指定します。
- Fillシェイプの背景として、線形グラデーション塗りつぶしパターンを設定します。
- 線形グラデーション塗りつぶしパターンの線形方向をX軸方向とします。
- 塗りつぶし色として、Spectrumによりカスタムカラーマップを設定します。引数は、色、位置の繰り返しとなります。
canvas実装
- canvasタグを定義し、idを設定しておきます。
- canvasオブジェクトより取得した2次元コンテキストを用いて、線形グラデーションを生成します。引数は線形方向を表し、この例ではX軸方向となります。
- 線形グラデーションのパラメータを指定します。パラメータは、最初の値が開始位置、次の値が色を表します。開始位置は0.0～1.0の範囲内で指定します。
- 塗りつぶし色として、線形グラデーションを指定します。
- 矩形を描画します。
ソースコードを見ると、似かよった構成となっていることがわかると思います。ただしcanvasの場合、線形方向のサイズがグラデーションのサイズを決定しているため、以下のようにサイズを小さくすると、グラデーションの結果も変わってしまいます。つまり、canvasではグラデーションの実体イメージが作成され、それを用いて塗りつぶされていると推測されます。
var linerGrad = context.createLinearGradient(0, 0, 100, 0);
（Sample¥001-1.html）
