Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

CurlとHTML5のcanvasを比較する
2次元グラフィックスの応用例

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/03/31 14:00

ダウンロード サンプルソース (11.0 KB)

 HTML5ではcanvasタグを利用した画像の描画が行えますが、RIAを実現するCurlでは当初からこういった機能をサポートしています。同一画像の描画を例にお互いのコーディング方法について比較してみましょう。

目次

はじめに

 最近、HTML5の記事をよく見かけるようになりました。次世代のHTML規格であるHTML5は、画像や動画などグラフィック関連の表現がサポートがされることで注目を集めています。

 今回は、その中のcanvasタグに焦点を当ててみたいと思います。HTML5ではcanvasタグとJavaScriptを用いて、容易に2次元グラフィックを表現できるようになります。canvasタグはInternet Explorer 8ではサポートされていませんが、他のブラウザではサポートされており、表現力の点からも今後は普及していく方向に進むのではないでしょうか。

 本記事では、canvasタグ実装とCurl実装の比較を交えて、Curlでの2次元グラフィックスについて紹介します。Curlでは当初より2次元グラフィックス、3次元グラフィックスを標準機能として提供しています。今回は、グラデーション表現とイメージの加工について説明していきたいと思います。

 なお、文中のサンプルは添付のサンプルコードでも確認できます。

開発手順

  1. グラデーション表現
  2. イメージ加工

開発環境

  • Curl RTE 7.0

1.グラデーション表現

 canvasとの実装比較として、双方のイメージとソースコードを用いて説明していきます。まずは縦方向のグラデーションからです。

Curl実装
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実装
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実装

  1. Fillシェイプを生成します。
  2. Fillシェイプの大きさを指定します。
  3. Fillシェイプの背景として、線形グラデーション塗りつぶしパターンを設定します。
  4. 線形グラデーション塗りつぶしパターンの線形方向をX軸方向とします。
  5. 塗りつぶし色として、Spectrumによりカスタムカラーマップを設定します。引数は、色、位置の繰り返しとなります。

canvas実装

  1. canvasタグを定義し、idを設定しておきます。
  2. canvasオブジェクトより取得した2次元コンテキストを用いて、線形グラデーションを生成します。引数は線形方向を表し、この例ではX軸方向となります。
  3. 線形グラデーションのパラメータを指定します。パラメータは、最初の値が開始位置、次の値が色を表します。開始位置は0.0~1.0の範囲内で指定します。
  4. 塗りつぶし色として、線形グラデーションを指定します。
  5. 矩形を描画します。

 ソースコードを見ると、似かよった構成となっていることがわかると思います。ただしcanvasの場合、線形方向のサイズがグラデーションのサイズを決定しているため、以下のようにサイズを小さくすると、グラデーションの結果も変わってしまいます。つまり、canvasではグラデーションの実体イメージが作成され、それを用いて塗りつぶされていると推測されます。

var linerGrad  = context.createLinearGradient(0, 0, 100, 0);
(Sample¥001-1.html)
(Sample¥001-1.html)

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 尾松 秀紀(オマツ ヒデキ)

    2度目の成人式を過ぎても、なお、現役で組んでたりします。 ^__^; 「ものづくり」は大好きな2児の父親です。真新しい技術には興味ありありで、暇を作っては、試してみたりしています。機会があれば、いろいろご紹介していきたいと思いますので、今後とも、よろしくお願いします。 P.S. 株式会社ベーシッ...

バックナンバー

連載:CurlデベロッパーセンターPick Up

もっと読む

All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5