本日は、 canvas の描画スタイル指定の続きとして、画像パターンやグラデーションを描画スタイルに指定する方法をご紹介します・・・と思ったのですが、両方を含めると文字数が多くなりすぎて投稿を撥ねられてしまいました。仕方ないので、画像パターン編とグラデーション編の 2 回に分けようと思います。やはり JavaScript をたくさん埋め込むのは無理がありますね（＾＾ゞ

ということで、本日は画像パターンを描画スタイルに指定する方法をご紹介します。基本的な単色の指定については既知であると仮定していますので、ご存じない方は前回の記事をご参照ください。残念なことに、 IE6 + ExplorerCanvas ではきちんと機能しません。規格上もこれらの機能のサポートは強制ではないので、仕方ありませんね。そのようなわけで、 IE6 で閲覧されている場合はサンプルが単なる静止画像になります。ご了承ください。

まずは使い方が簡単なパターンの指定からご紹介します。パターンは、単色の描画色の代わりに任意のビットマップ画像を描画スタイルに指定する機能です。まずはサンプルで感じを掴んでください。

Fill
Stroke

上記サンプルで使っているパターン画像は以下のサイトからいただきました。たくさんの素晴らしいフリー素材を公開されていて、たいへん有用なサイトだと思います。オーナー様に感謝です。
e-素材web : http://homepage2.nifty.com/yaslink/

パターンは単色と同様に strokeStyle, fillStyle 属性に設定します。違うのは、文字列の代わりに createPattern メソッドで作成したオブジェクトを設定する点です。 createPattern メソッドの書式は以下のようになります。

createPattern(<パターン画像>, <リピート>)

パターン画像

パターンとして利用する画像です。通常の drawImage メソッド（canvas の描画メソッド参照）と同じ方法で読み込まれた画像オブジェクトが指定できます。座標系の原点が画像の左上隅になるように配置され、リピートで指定した方法でタイル貼りされます。

リピート

画像をリピートする方法です。 "repeat" （縦横ともにリピート）, "repeat-x" （横方向のみリピート）, "repeat-y" （縦方向のみリピート）, "no-repeat" （リピートしない） のいずれかの文字列が指定できます。省略すると "repeat" と仮定されます。ブラウザによってサポート状況が異なりますので注意してください（後述）。

createPattern メソッドはパターンを定義したオブジェクトを返します。このオブジェクトを strokeStyle, fillStyle のいずれか（もしくは両方）に設定することで、矩形やパスが指定した画像で描画されます。なお、ブラウザがパターン描画をサポートしていない場合、 createPattern メソッドは null を返すことになっています。

createPattern メソッドをサポートしていても、リピート オプションのサポート状況はブラウザによってまちまちです。一覧表にまとめましたので、参考にしてください。

また、 "no-repeat" 指定などで画像の外の領域をどのように描画するかが規格では定義されていないように見えます。実際、 Opera が画像の端のラインを引き伸ばすのに対して、 Firefox は白で塗り潰します。しばらくの間は、 "repeat" を指定しておくのが無難なようです。

先のサンプルのソースは以下のようになります。

<script type="text/javascript">
var page = { // 名前空間
 
fillPattern : 0,
strokePattern : 1,
 
drawPatternExample : function()
{
  canvas = document.getElementById("page_canvas_pattern");
  if(canvas.getContext)
  {
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, 200, 200);
    ctx.fillStyle = this.patterns[this.fillPattern];
    ctx.strokeStyle = this.patterns[this.strokePattern];
    ctx.lineWidth = 10;
    ctx.lineJoin = "round";
    ctx.fillRect(10, 10, 180, 180);
    ctx.strokeRect(10, 10, 180, 180);
  }
},
 
setFillPattern : function(index)
{
    this.fillPattern = index;
    this.drawPatternExample();
},
 
setStrokePattern : function(index)
{
    this.strokePattern = index;
    this.drawPatternExample();
},
 
onload : function()
{
  var canvas = document.getElementById("page_canvas_pattern");
  if(canvas.getContext)
  {
    var ctx = canvas.getContext("2d");
    page.patterns = [
      ctx.createPattern(document.getElementById("page_pat1"), "repeat"),
      ctx.createPattern(document.getElementById("page_pat2"), "repeat"),
      ctx.createPattern(document.getElementById("page_pat3"), "repeat"),
      ctx.createPattern(document.getElementById("page_pat4"), "repeat")];
  }
 
  this.drawPatternExample();
}
 
};
 
window.onload = function(){ page.onload() };
</script>
 
<canvas id="page_canvas_pattern" width="200" height="200" style="position:relative;">
<img src="http://image.blog.livedoor.jp/sourcewalker/imgs/7/7/77ccb748.png" width="200" height="200" border="0" alt="canvas : パターン描画のサンプル" hspace="5" class="pict" />
</canvas>
 
<table class="noborder">
<tr>
<td></td>
<td><img id="page_pat1" src="http://image.blog.livedoor.jp/sourcewalker/imgs/c/c/cc907b44.gif" alt="パターン画像1" /></td>
<td><img id="page_pat2" src="http://image.blog.livedoor.jp/sourcewalker/imgs/f/3/f3a77fc9.gif" alt="パターン画像2" /></td>
<td><img id="page_pat3" src="http://image.blog.livedoor.jp/sourcewalker/imgs/f/f/ffac8b6c.gif" alt="パターン画像3" /></td>
<td><img id="page_pat4" src="http://image.blog.livedoor.jp/sourcewalker/imgs/c/9/c95bab04.gif" alt="パターン画像4" /></td>
</tr>
<tr>
<td style="text-align:right;">Fill</td>
<td><input type="radio" name="fill" onclick="page.setFillPattern(0);" checked /></td>
<td><input type="radio" name="fill" onclick="page.setFillPattern(1);" /></td>
<td><input type="radio" name="fill" onclick="page.setFillPattern(2);" /></td>
<td><input type="radio" name="fill" onclick="page.setFillPattern(3);" /></td>
</tr>
<tr>
<td style="text-align:right;">Stroke</td>
<td><input type="radio" name="stroke" onclick="page.setStrokePattern(0);" /></td>
<td><input type="radio" name="stroke" onclick="page.setStrokePattern(1);" checked /></td>
<td><input type="radio" name="stroke" onclick="page.setStrokePattern(2);" /></td>
<td><input type="radio" name="stroke" onclick="page.setStrokePattern(3);" /></td>
</tr>
</table>

長くて申し訳ありません。こんなのいくつも載せれば、そりゃ撥ねられるわな（＾＾ゞ。もっとも、重要なのは onLoadHandler のパターンオブジェクトを作成している部分と、 drawPatternExample の描画処理だけです。その他はパターン画像の切り替えを実装しているだけですので、無視してしまってかまわないと思います。

それでは、次回に続きます！（＾＾）/