【HTML5】入門 HTML5をまとめてみる4【Canvas】

HTML/CSS

こんにちは、しきゆらです

HTML5関連の記事は4回目となりますね

入門 HTML5

前回は、Canvasにグラフを作ってみました（今までのHTML5関連の記事はこちら→HTML5関連）

今回は、Canvasでのグラデーションについてまとめて行きます

 

 

Canvasでのグラデーション

まず、Canvasでは2種類のグラデーションがサポートされています

    • 線形グラデーション
    • 円形グラデーション

どのようなものかは、実際に見てみましょう→デモページ

線形グラデーションは、直線的に変化し

円形グラデーションは、放射状に変化しています

そのまんまですね

では、コードを見てみましょう

 

グラデーションのコード

以下のコードで出来ています

function draw_gradient(){
  /*線形グラデーション*/
  var canvas = document.getElementById("canvas_gradient1");
  var context = canvas.getContext("2d");
  var gradient = context.createLinearGradient(0, 0, 300, 0);

  gradient.addColorStop(0, "rgb(255,0,0)");
  gradient.addColorStop(0.5, "rgb(255, 255, 0)");
  gradient.addColorStop(1, "rgb(0, 0, 255)");

  context.fillStyle = gradient;
  context.fillRect(0, 0, 300, 300);

  var canvas2 = document.getElementById("canvas_gradient2");
  var context2 = canvas2.getContext("2d");
  var gradient2 = context2.createLinearGradient(0, 0, 0, 300);

  gradient2.addColorStop(0, "rgb(255,0,0)");
  gradient2.addColorStop(0.5, "rgb(255, 255, 0)");
  gradient2.addColorStop(1, "rgb(0, 0, 255)");

  context2.fillStyle = gradient2;
  context2.fillRect(0, 0, 300, 300);

  var canvas3 = document.getElementById("canvas_gradient3");
  var context3 = canvas3.getContext("2d");
  var gradient3 = context3.createLinearGradient(0, 0, 300, 300);

  gradient3.addColorStop(0, "rgb(255,0,0)");
  gradient3.addColorStop(0.5, "rgb(255, 255, 0)");
  gradient3.addColorStop(1, "rgb(0, 0, 255)");

  context3.fillStyle = gradient3;
  context3.fillRect(0, 0, 300, 300);

  /*円形グラデーション*/
  var canvas = document.getElementById("canvas_gradient4");
  var context = canvas.getContext("2d");
  var gradient = context.createRadialGradient(150, 150, 10, 150, 150, 200);

  gradient.addColorStop(0, "rgb(255,0,0)");
  gradient.addColorStop(0.5, "rgb(255, 255, 0)");
  gradient.addColorStop(1, "rgb(0, 0, 255)");

  context.fillStyle = gradient;
  context.fillRect(0, 0, 300, 300);
}

コード全体として

  • Canvasの取得
  • contextの取得
  • グラデーションの定義
  • グラデーションの色指定
  • Canvasに描画

という固まりが並んでいます

細かく見て行きましょう

 

Canvas、contextの取得

var canvas = document.getElementById("canvas_gradient1");
var context = canvas.getContext("2d");

この部分は前回までと同じです

HTMLで定義したCanvasをidを用いて取得し、そのCanvasのcontextを取得します

contextには必ず「2d」を渡すことに注意します

 

グラデーションの定義

var gradient = context.createLinearGradient(0, 0, 300, 0);
var gradient = context.createRadialGradient(150, 150, 10, 150, 150, 200);

これは5行目、39行目の部分です

ここでは、グラデーションの種類と変化する方向を定義しています

createLinearGradient(x0, y0, x1, y1)

これは線形グラデーションを定義しています

引数は、グラデーションの開始点(x0, y0)と終点(x1, y1)を渡します

 

createRadialGradient(x0, y0, r0, x1, y1, r1)

これは円形グラデーションを定義しています

2つの円を引数として渡します

開始となる中心点(x0, y0)半径r0の円と、終点となる中心(x1, y1)半径r1の円です

 

どちらも、開始点から終了点へ向けて変化するグラデーションを定義しています

変化する方向を変えたい場合は16行目の部分や

var gradient2 = context2.createLinearGradient(0, 0, 0, 300);

27行目の部分

var gradient3 = context3.createLinearGradient(0, 0, 300, 300);

のように、開始点・終了点を移動させることで方向を変えることができます

 

基準色の配置

gradient.addColorStop(0, "rgb(255,0,0)");
gradient.addColorStop(0.5, "rgb(255, 255, 0)");
gradient.addColorStop(1, "rgb(0, 0, 255)");

これは7～9行目

ここでは、グラデーションの変化するポイントと基準となる色を指定しています

gradient.addColorStop(point, "color")

引数として、基準色の場所（0～1）と基準色を渡します

場所は0は開始点側、1が終了点側を表します

0.5とすると、丁度真ん中に基準色を置いたことになります

基準色を置くことで、その間のグラデーションを表示してくれるんですね

 

Canvasに描画

ここまで見てきたメソッドはすべて下書きメソッドです

（lineToやmoveToと同じですね）

Canvasにグラデーションを描画する場合は矩形や線を描画します

context.fillStyle = gradient;
context.fillRect(0, 0, 300, 300);

これは22～23行目の部分

今まで定義してきたグラデーションを、fillStyleでcontextに設定します

そして、矩形や線を描画することグラデーションを描画することができます

グラデーションは、描画する色の指定などの一部ということですね

fillStyleでcontextに設定しなければ、せっかく今まで定義してきたものが使われないので注意です

 

このような流れでグラデーションを定義します

コードの中身が見えてきましたか？

今回はここまで

 

もっとこう書くと見やすいよ！のようなアドバイスがあればコメントまで

入門 HTML5

Posted by しきゆら