更新日: 2011-01-20 (木) 23:11:58 (1956d)

:HTML5

HTML5 Canvasでグラデーションを描画する

HTML5ではCanvasという機能があり、高度な描画が可能です。
今まで、デザイナーが:PhotoshopやIllustratorを利用して描いていたような描画が、ある程度HTML5のソースコードに書くことで可能になります。

ここでは、まず簡単なグラデーションの描画をやってみます。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head>
<body>

<!-- canvas描画のために、canvasタグを使います -->
<canvas id="gradient_canvas" width="500" height="500"></canvas>

<script type="text/javascript">
  // canvasを取得します
  var gradient_canvas = document.getElementById("gradient_canvas"); 

  // canvasのコンテキストを記述 2dとしておきます。3dが出てくるときのためにある引数ですが、
  // 現時点ではまだ3dには対応していないみたいです。
 var context = gradient_canvas.getContext("2d");
 
 // 線形のグラデーションを描きます createLinearGradientの引数は順番に
 // Canvas内のグラデーションのX軸の開始座標、Y軸の開始座標、X軸の終了座標、Y軸の終了座標、
 var gradient = context.createLinearGradient(0,0,500,500);

 //グラデーションの内容を指定。引数は順番に、開始位置、グラデーションの色
 gradient.addColorStop(0, "#ffffff"); //白
 gradient.addColorStop(0.5, "#ffff00"); //黄色
 gradient.addColorStop(1, "#ff0000"); //赤

 //コンテキストを、gradientで塗りつぶします
 context.fillStyle = gradient;

 //四角形を描画します。fillRectの引数は順番に
 //Canvas内のX軸の開始座標、Y軸の開始座標、X軸の終了座標、Y軸の終了座標
 context.fillRect(0,0,gradient_canvas.width,gradient_canvas.height);

//ななめに白から黄色、赤に変わるグラデーションの長方形になります
 
</script>

</body></html>

実際のサンプルはこちら HTML5が動作するブラウザで見てください。

http://onlineconsultant.jp/web/html5_sample/gradation.html


選択肢 投票
このページの情報は役に立った 1  
このページの情報は役に立たなかった 0  
どちらでもない 0  

でじうぃきは神奈川県横浜市の位置情報システム・スマホアプリ開発の株式会社オンラインコンサルタントが運営しています。
投稿
トップ   このページを編集する 再編集不可にする 差分 バックアップ 添付 複製 名前変更 リロード   新しいページを作る 一覧 検索する 最新の更新   ヘルプ   最終更新のRSS
Last-modified: 2011-01-20 (木) 23:11:58 (1956d)