[69-5] canvasにグラデーションやパターン、シャドウを指定しよう

今回は、<canvas>上の図形にグラデーションやパターンの指定をします。
また、図形にシャドウもつけてみました。

本日のINDEX
  1. グラデーションの指定
    1. 横方向の線形グラデーション
    2. 縦方向の線形グラデーション
    3. ななめ方向の線形グラデーション
    4. 円形(放射)グラデーション
  2. パターンの指定
    1. キャンバスをパターンとして使う(ギンガムチェックのパターン)
    2. 「グリッド」もカンバスのパターンで作っています
    3. 画像をパターンとして使う(ドットのパターン)
  3. シャドウの指定
    1. 4つのプロパティで指定
    2. 画像にシャドウを付ける

横方向の線形グラデーション( createLinearGradient(); )

線形グラデーションは「createLinearGradient(x0,y0,x1,y1);」で指定します。
x0、y0、x1、y1は、キャンバス上の座標ピクセル数です。
「x0,y0」の地点から「x1,y1」に向かって直線的に階調が変化します。

色の指定は「addColorStop(offset,color);」でします。
「offset」には0〜1の間の数値を指定。0が始点で、1が終点です。

横方向の線形グラデーションは、「x0,y0」の地点から「x1,y1」の地点を横方向に指定するだけ。

最初のサンプルを見てみましょう。
グリーンからイエローへ、x方向のシンプルなグラデーションです。

    var grad  = ctx.createLinearGradient(20,0,120,0);
    grad.addColorStop(0,'green');
    grad.addColorStop(1,'yellow');
    ctx.fillStyle = grad;
    ctx.fillRect(20,20,100,100);

縦方向の線形グラデーションと途中で色を変える方法

上の横方向のグラデーションとおなじ「createLinearGradient(x0,y0,x1,y1);」で、縦方向に指定するだけ。

途中で色を変える場合は、「offset」に途中で 0.5などの小数を入れて色指定するだけです。
(0.5なら、ちょうど半分の位置に新しい色がくるようにグラデーションが生成されます)

サンプルでは、10px幅にした四角形の「線」に、グラデーションを指定。
四角形の始点(左上の角)は140,20 の位置ですが、
線幅10pxなので、グラデーションの始まりはy=15px、終わりはy=125pxなのに注目です。(まあそんなに厳密じゃなくても良い場合はそれなりに)

    var grad2  = ctx.createLinearGradient(0,15,0,125);
    grad2.addColorStop(0,'#ff4000');
    grad2.addColorStop(0.5,'#ff0');
    grad2.addColorStop(1,'#40ff00');
    ctx.lineWidth = 10;
    ctx.strokeStyle = grad2;
    ctx.strokeRect(140,20,100,100);

ななめ方向の線形グラデーション

これも同じ「createLinearGradient(x0,y0,x1,y1);」の式で、x0,y0 と x1,y1 の位置関係をななめにするだけ。

サンプルでは、透明カラーのグラデーションにしてみました。
始点も終点も同じ色で、中間地点の透明度を0にしています。

    var grad3  = ctx.createLinearGradient(260,20,360,120);
    grad3.addColorStop(0,'rgba(77,166,255,1)');
    grad3.addColorStop(0.5,'rgba(77,166,255,0)');
    grad3.addColorStop(1,'rgba(77,166,255,1)');
    ctx.fillStyle = grad3;
    ctx.fillRect(260,20,100,100);

円形(放射)グラデーション( createRadialGradient(); )

線形グラデーションは「createRadialGradient(x0,y0,r0,x1,y1,r1);」で指定します。
「x0,y0」は始点になる正円の中心点。「r0」はその半径。
「x1,y1」は終点になる正円の中心点。「r1」はその半径です。
色の指定は線形グラデーションと同じで「addColorStop(offset,color);」で指定します。
「offset」には0〜1の間の数値を指定。0が始点で、1が終点。途中で色を変えることも可能。

サンプルでは、正円の中を円形グラデで塗ってみました。
始点になる円の半径は、下のソースのように「0」でもOK。

    var grad4  = ctx.createRadialGradient(420,60,0,420,60,66);
    grad4.addColorStop(0,'#bbf');
    grad4.addColorStop(0.6,'#2626ff');
    grad4.addColorStop(1,'#00008c');
    ctx.beginPath();
    ctx.arc(430, 70, 50, 0, Math.PI*2, false);
    ctx.fillStyle = grad4;
    ctx.fill();

もうひとつのサンプルは、終点の色を透明にしてみました。

    var grad5  = ctx.createRadialGradient(550,70,0,550,70,60);
    grad5.addColorStop(0,'rgba(255,128,0,1)');
    grad5.addColorStop(0.9,'rgba(255,128,0,0)');
    ctx.beginPath();
    ctx.arc(550, 70, 60, 0, Math.PI*2, false);
    ctx.fillStyle = grad5;
    ctx.fill();

キャンバスをパターンとして使う( createPattern(); )

パターンは「createPattern(image, repeat);」で指定します。
「image」には、<img>、<video>要素、キャンバスが指定できます。
「repeat」には「'repeat'」「'repeat-x'(横方向のみ)」「'repeat-y'(縦方向のみ)」のいずれかを指定します。

まずサンプル左側のギンガムチェックのほう。
別の「canvas」を新たに作って、パターンに利用しています。

(このサンプルは、シャドウも指定していますが、
 シャドウについてはのちほど詳細

ソースを見てみましょう。
「createElement("canvas");」で新しくキャンバスを作成して(2〜24行目まで)、
そのキャンバス(変数名 ptCnvs)を、パターンとして指定し(26行目)、
四角形の fillStyle に、そのパターンを指定しています。(27行目)

    /*ギンガムチェックのパターンになるcanvasを作成*/
    var ptCnvs = document.createElement("canvas");
    ptCnvs.width = 20;
    ptCnvs.height = 20;
    var ptCtx = ptCnvs.getContext("2d");
    /*背景の白い四角*/
    ptCtx.fillStyle = '#fff';
    ptCtx.fillRect(0,0,20,20);
    /*横ライン2本(透明度0.4の赤に指定)*/
    ptCtx.beginPath();
    ptCtx.moveTo(0,0);
    ptCtx.lineTo(20,0);
    ptCtx.moveTo(0,20);
    ptCtx.lineTo(20,20);   
    ptCtx.lineWidth = 10;
    ptCtx.strokeStyle = 'rgba(255,0,5,0.4)';
    ptCtx.stroke();
    /*縦ライン2本(太さやカラーは指定しなくても上と同じ)*/ 
    ptCtx.beginPath();
    ptCtx.moveTo(0,0);
    ptCtx.lineTo(0,20);
    ptCtx.moveTo(20,0);
    ptCtx.lineTo(20,20);
    ptCtx.stroke();
    /*パターン「ptrn2」を塗りに指定して四角形を描く*/
    var ptrn2 = ctx2.createPattern(ptCnvs, 'repeat');
    ctx2.fillStyle = ptrn2;
    /*シャドウの指定*/
    ctx2.shadowOffsetX = 5;
    ctx2.shadowOffsetY = 5;
    ctx2.shadowColor = 'gray';
    ctx2.shadowBlur = 5;
    ctx2.fillRect(20,20,100,100);

別のキャンバスで作っているのは、このようなイメージです。
(グレーの部分は枠外だと思ってください)
白い四角の辺を、半透明の赤い線で、縦横に囲み、線が重なるところだけ、赤が濃くなるようにしています。

「グリッド」もキャンバスのパターンで作っています

各サンプルの背景に、20px角のグリッドをつけていますが、
実はこのグリッドも、別のキャンバスで描いて、パターンとして塗っています。

実際は20×20pxですが、分かりやすいように2倍に拡大したのがコレ。
ベージュの四角の、右側と下側だけ線をつけたもの。これをパターンにしています。

パターンにするキャンバスは、別ファイル「grid.js」にしています。

    var pCnvs = document.createElement("canvas");
    pCnvs.width = 20;
    pCnvs.height = 20;
    var pCtx = pCnvs.getContext("2d");
    pCtx.fillStyle = '#F8F4EC';
    pCtx.fillRect(0,0,20,20);	
	pCtx.beginPath();
	pCtx.moveTo(20,0);
	pCtx.lineTo(20,20);
	pCtx.lineTo(0,20);
	pCtx.strokeStyle = '#DFD7C5';
    pCtx.stroke();

グリッドパターンを使っているのは「gradation()」と「PatternSet()」です。
別ファイル「grid.js」を<head>に<script src="">読み込んで(1行目)、
各functionで、変数名 pCnvs を呼び出し、パターンにして(13行目と22行目)、
キャンバスの全面を覆う四角形の塗りに、このパターンを使っています(14行目と23行目)。

<script src="js/grid.js"></script>
<script>
onload = function() {
    gradation();
    PatternSet();
    shadowSet();
};

function gradation() {	
    var cnvs = document.getElementById('canvas1');
    var ctx = cnvs.getContext('2d');
	/* パターンで背景にグリッドを描画しています(外部ファイル grid.js) */	
    var ptrn = ctx.createPattern(pCnvs, 'repeat');
    ctx.fillStyle = ptrn;
    ctx.fillRect(0,0,620,140);
	/*以下略(グラデーションのサンプルソース)*/	
}
function PatternSet() {
    var cnvs2 = document.getElementById('canvas2');
    var ctx2 = cnvs2.getContext('2d');
	/* パターンで背景にグリッドを描画しています(外部ファイル grid.js)	*/
    var ptrn = ctx2.createPattern(pCnvs, 'repeat');
    ctx2.fillStyle = ptrn;
    ctx2.fillRect(0,0,280,150);
    /*以下略(パターンのサンプルソース)*/ 
}
function shadowSet() {/*略*/}
</script>

画像をパターンとして使う

サンプル右側のドット柄のほうを見てみましょう。

画像「ptrn_dot.gif」を読み込んでパターンとし、四角形の「線」に指定しました。
「onloadファンクション」内で、パターンも、
図形の描き出しも、全部指定しておいて、
一番最後に画像を読み込むのがミソです。

←「ptrn_dot.gif」はコレ。

    /*パターンになるimg要素を生成*/
    var img = new Image();
    img.onload = function () {
    var ptrn3 = ctx2.createPattern(img,'repeat');
    /*パターン「ptrn3」を線に指定して四角形を描く*/
    ctx2.strokeStyle = ptrn3;
    ctx2.lineWidth = 20;
    /*シャドウの指定(色とぼかし幅だけ書き換えました)*/
    ctx2.shadowColor = '#815750';
    ctx2.shadowBlur = 10;
    ctx2.strokeRect(150,20,100,100);
    };
    img.src='img/ptrn_dot.gif';

シャドウの指定(4つのプロパティで指定)

シャドウは、図形を描き出す前(色指定のタイミングと同じ)に指定します。
以下の4つのプロパティを使います。

  • shadowOffsetX(X方向へずらす距離。デフォルトは「0」)
  • shadowOffsetY(Y方向へずらす距離。デフォルトは「0」)
  • shadowColor(色。デフォルトは「透明」)
  • shadowBlur(ぼかし幅。デフォルトは「0」)

全部デフォルト値があるところを見ると、どんな図形も、透明でぼかし幅もずれも0のシャドウがついているってことになりますね。

先ほどの「パターン」のサンプルにつけたシャドウを見てみましょう。
シャドウの4つのプロパティは、1度指定すると、
変更しない限りそのまま指定が残ります

右の四角形のシャドウは、色とぼかし幅だけ指定しています。shadowOffsetX,Y は、先に指定したもの(チェックの四角の)がそのままイキています。

/*チェック柄の四角のシャドウの指定*/
    ctx2.shadowOffsetX = 5;
    ctx2.shadowOffsetY = 5;
    ctx2.shadowColor = 'gray';
    ctx2.shadowBlur = 5;
    ctx2.fillRect(20,20,100,100);
    
/*ドット柄の四角のシャドウの指定(色とぼかし幅だけ書き換えました)*/
    ctx2.shadowColor = '#815750';
    ctx2.shadowBlur = 10;
    ctx2.strokeRect(150,20,100,100);

画像にシャドウをつける

画像にシャドウを付ける場合は、
onloadファンクションの中で、
drawImage(); で描画する「前に」

シャドウの指定をします。

この画像は 素材辞典(株式会社データクラフト)から使用しています。著作権は株式会社データクラフトにあります。

function shadowSet() {	
    var cnvs3 = document.getElementById('canvas3');
    var ctx3 = cnvs3.getContext('2d');
/* イメージを生成 */
    var img2 = new Image();
    img2.onload = function() {
    /*シャドウの指定*/
	ctx3.shadowOffsetX = 5;
	ctx3.shadowOffsetY = 5;
	ctx3.shadowColor = '#999';
	ctx3.shadowBlur = 10;
	/*画像の描画位置*/
    ctx3.drawImage(img2, 0, 0);
	
/* 引き続き2枚目のイメージ */
	/*シャドウの指定を変更*/
	ctx3.shadowOffsetX = 10;
	ctx3.shadowOffsetY = 10;
	ctx3.shadowColor = '#ccc';
	ctx3.shadowBlur = 20;
	/*画像の描画位置を変更して描画*/
    ctx3.drawImage(img2, 250, 0);
    };
    img2.src = "img/cups.jpg";
}

同じ画像を何度も描き出すときは、1つの「onloadファンクション」の中で指定をします。
画像の上に、四角形などの図形を描きたいときも、このファンクション内で。
違う画像を読み込む場合には、新しく別の「onloadファンクション」を作ります。

次回予告

なんだかだんだん慣れてきて、面白くなってきました。
ラインの太さ、色、シャドウの幅や色など、1度指定すると、次の図形にも同じ指定がそのまま適用されることが分かってきました。
(これを保存・復元する「save();」「restore();」というメソッドがあるそうです。
 これは後日使ってみます。)

さて今回までは、HTMLファイルのロード時に、キャンバスが表示されるようにしていましたが、次回は別の「実行のタイミング」もやってみよう。
「onclick」イベントを使って、クリックするとキャンバス上で変化するようなモノを作ってみみたいと思います。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.