WebOS Goodies

WebOS の未来を模索する、ゲームプログラマあがりの Web 開発者のブログ。

WebOS Goodies へようこそ! WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。
Subscribe       

canvas : 描画スタイルの指定(基本編)

だいぶ日が空いてしまいましたが、本日は久しぶりに canvas ネタです。前回までで図形の描画方法はだいたいご紹介しましたので、今回から描画スタイルの指定方法に移りたいと思います。 canvas では図形の描画に対してさまざまなスタイルを適用できますが、まずはそのなかでも比較的単純なスタイルをご紹介します。

スタイル指定の基礎

canvas での描画スタイルは、描画コンテキスト(getContext メソッドで取得できるオブジェクト)のアトリビュートで指定します。描画スタイルの指定に関連するアトリビュートには、以下のものがあります。

アトリビュート 指定する内容
fillStyle 塗り潰しで使われるスタイル
strokeStyle 輪郭線の描画に使われるスタイル
globalAlpha 透明度
lineWidth 輪郭線の太さ
lineCap 輪郭線の両端の形
lineJoint 輪郭線の繋ぎ目の形
miterLimit 後の説明を参照

これだけ見てもかなりいろいろな表現ができそうなのがわかりますね。代入できる値の形式や型はアトリビュートごとに異なるので、個別に詳細をご紹介しようと思います。

塗り潰しと輪郭線の描画色指定

fillStyle, strokeStyle はこれまでもたびたび使ってきましたね。ここできちんとご紹介しておきましょう。 fillStyle は図形の塗り潰し(fill 系のメソッド)、 strokeStyle は図形の輪郭線描画(stroke 系のメソッド)に適用される描画色の指定です。以下の書式の文字列を指定できます(hsl, hslaIE6 + ExplorerCanvas では使えないようです)。

書式 指定可能な値 例(赤)
色名 HTML4, SVG, System など red
#RGB 0〜f #f00
#RRGGBB 00〜ff #ff0000
rgb(R, G, B) 0〜255 または 0%〜100% rgb(255, 0, 0)
rgba(R, G, B, A) A は 0.0〜1.0、他は同上 rgba(255, 0, 0, 1.0)
hsl(H, S, L) H は 0〜360, S・L は 0%〜100% rgba(0, 100%, 50%)
hsla(H, S, L, A) A は 0.0〜1.0、他は同上 hsla(0, 100%, 50%, 1.0)

これらの色指定文字列を単純に代入するだけで、その後の描画メソッドの描画色が変更されます。

ctx.fillStyle   = "rgb(255, 0, 0)";
ctx.strokeStyle = "#0000ff";

これらの描画色指定に加えて、 fillStyle, strokeStyle にはグラデーションやパターンを定義したオブジェクトも指定できます。これらに関しては、次回で詳しくご紹介しようと思っています。

透明度の指定

globalAlpha アトリビュートは描画時の透明度を指定します。指定できる値は 0.0〜1.0 の浮動小数点数値です。

ctx.globalAlpha = 0.5;

矩形とパスの透明度は fillStyle, strokeStyle で指定したほうが便利なので、このアトリビュートは画像の透明度指定に使うことが多いはずです。しかし、現在のところ画像に対しての透明度指定は Firefox でしか機能しないようです(Safari は試していません)。う〜ん(´ー`;。なお、 fillStyle, strokeStyle の透明度指定と同時に使った場合は双方のα値が乗算されるようです。

線のスタイル指定

canvas では、輪郭線(stroke)のスタイルもさまざまに変更できます。下表に線のスタイルを指定するアトリビュートをまとめました。

アトリビュート 指定できる値 デフォルト値
lineWidth 任意の正の数値 1
lineCap butt, round, square butt
lineJoin round, bevel, miter miter
miterLimit 任意の正の数値 10

これらの設定は stroke 系のメソッドで描画される図形に適用されます。以降、それぞれのアトリビュートの詳細です。

lineWidth

lineWidth に関してはとくに説明するまでもありませんね。線の太さを指定できます。指定できる値は正の整数、もしくは浮動小数点数値で、小数点以下の数値もきちんと反映されるようです。後のサンプルで試してみてください。

lineCap

lineCap は線の端点の形を指定します。 "butt"(普通にぶつ切り), "round"(丸), "square"(四角)のいずれかが指定できます。 "butt" と "square" の使い分けがわかりづらいですが、以下の画像を見ていただければ一目瞭然かと思います。

canvas : lineCap のサンプル

もっとも、違いがわかっても使い道はイマイチ思いつきませんが・・・(^^;

lineJoin と miterLimit

lineJoin は連続した線の繋ぎ目の処理を指定するアトリビュートです。 "miter"(尖らせる), "round"(丸く面取り), "bevel"(直線で面取り)のいずれかが指定できます。

canvas : lineJoin のサンプル

"miter" を指定した場合、 2 つの直線のなす角が非常に小さい場合、突起が極端に長くなってしまうという問題があります。その対応として、 miterLimit アトリビュートが導入されています。突起の長さが線の太さの miterLimit 倍を超えた場合、その繋ぎ目は "bevel" として扱われます。これも後のサンプルで試していただけるとわかりやすいと思います。

サンプル

今回ご紹介したアトリビュートの機能を手軽に試せるサンプルを用意しました。以下の画像は canvas を使って描画されており、画像の下のテキストボックスで描画時のアトリビュートを変更できます。いろいろな値を試してみてください。ブラウザーでサポートされている機能を確認するのにも便利だと思います(^^)

canvas をサポートしていないブラウザでは実行できません。ご了承ください m(_ _)m

fillStyle:
strokeStyle:
globalAlpha:
lineWidth:
lineCap:
lineJoin:
miterLimit:

このサンプルのソースは以下のようになっています。

<canvas id="page_canvas" width="320" height="240" style="position:relative;"></canvas><br/><br/>

fillStyle:
<input id="page_fillStyle" type="text" value="rgba(255, 0, 0, 0.5)"
    onkeyup="page.update();" style="width:200px;"/><br/>
strokeStyle:
<input id="page_strokeStyle" type="text" value="rgba(255, 0, 0, 1.0)"
    onkeyup="page.update();" style="width:200px;"/><br/>
globalAlpha:
<input id="page_globalAlpha" type="text" value="1.0"
    onkeyup="page.update();" style="width:200px;"/><br/>
lineWidth:
<input id="page_lineWidth" type="text" value="1.0"
    onkeyup="page.update();" style="width:200px;"/><br/>
lineCap:
<input id="page_lineCap" type="text" value="butt"
    onkeyup="page.update();" style="width:200px;"/><br/>
lineJoin:
<input id="page_lineJoin" type="text" value="miter"
    onkeyup="page.update();" style="width:200px;"/><br/>
miterLimit:
<input id="page_miterLimit" type="text" value="10.0"
    onkeyup="page.update();" style="width:200px;"/><br/>

<script type="text/javascript">
var page = {

loaded : false,
image  : new Image(),

update : function()
{
  var canvas = document.getElementById("page_canvas");
  if(canvas.getContext)
  {
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle   = document.getElementById("page_fillStyle").value;
    ctx.strokeStyle = document.getElementById("page_strokeStyle").value;
    ctx.globalAlpha = document.getElementById("page_globalAlpha").value;
    ctx.lineWidth   = document.getElementById("page_lineWidth").value;
    ctx.lineCap     = document.getElementById("page_lineCap").value;
    ctx.lineJoin    = document.getElementById("page_lineJoin").value;
    ctx.miterLimit  = document.getElementById("page_miterLimit").value;

    if(this.loaded)
    {
      ctx.drawImage(this.image, 0, 0);
    }

    ctx.fillRect(10, 10, 150, 150);
    ctx.strokeRect(10, 10, 150, 150);

    ctx.beginPath();
    ctx.moveTo(100, 200);
    for(var i = 1 ; i <= 10 ; ++i)
    {
      var u = (200-40) * i / 10;
      var d = (i & 1) ? +30 : -30;
      ctx.lineTo(100 + u + d, 200 - u + d);
    }
    ctx.stroke();
  }
},

onload : function()
{
  var self = this;

  this.update();
  this.image = new Image();
  this.image.onload = function()
  {
    self.loaded = true;
    self.update();
  };
  this.image.src = "http://image.blog.livedoor.jp/sourcewalker/imgs/2/f/2ff6e712.JPG"
}

};

window.onload = function() { page.onload(); };
</script>

本日は、 canvas で描画色やラインスタイルを設定する方法をご紹介しました。ラインスタイルが結構充実しているのが印象的ですね。グラフや吹き出しを描画するときに便利そうです。さらに次回では、図形にグラデーションやパターンを貼り付ける方法をご紹介しようと思いますので、ご期待ください!

関連記事

この記事にコメントする

Recommendations
Books
「Closure Library」の入門書です。
詳しくはこちらの記事をどうぞ!
Categories
Recent Articles