SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

CurlデベロッパーセンターPick Up(AD)

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 最近、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)

次のページ
イメージのクリッピング

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
CurlデベロッパーセンターPick Up連載記事一覧

もっと読む

この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5032 2010/03/31 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング