ブログでHTML5 Canvas 塗りつぶしスタイル

色
前回は黒い長方形を描きました。
今回はまずそれに色を付けてみましょう。

<canvas id="drawColoredRectangleCanvas" width="300" height="200"></canvas>
<script>
    (function()
    {
        var canvas = document.getElementById("drawColoredRectangleCanvas");
        var context = canvas.getContext("2d");
        context.fillStyle = "rgb(0, 0, 255)";
        context.fillRect(20, 40, 200, 100);
    })();
</script>

context.fillStyleプロパティ

デフォルト値：rgb(0,0,0)
つまり黒です。
rgbの括弧の中に入る数字は0~255までの数で、
それぞれ赤、緑、青を意味しています。
たとえばrgb(255, 0, 0)は赤、rgb(0, 255, 0)は緑、rgb(0, 0, 255)は青です。

---

グラディエント

グラディエント（すこしずつ変わりゆく色）をスタイルに設定することもできます。

<canvas id="drawGradientRectangleCanvas" width="300" height="200"></canvas>
<script>
    (function()
    {
        var canvas = document.getElementById("drawGradientRectangleCanvas");
        var context = canvas.getContext("2d");
        var gradient = context.createLinearGradient(0, 0, 200, 0);
        gradient.addColorStop(0, "rgb(0, 0, 255)");
        gradient.addColorStop(1, "rgb(255, 0, 0)");
        context.fillStyle = gradient;
        context.fillRect(0, 0, 200, 100);
    })();
</script>

context.createLinearGradient(x0, y0, x1, y1);

x0はグラディエントのスタート地点のx座標です。
y0はグラディエントのスタート地点のy座標です。
x1はグラディエントの終点のx座標です。
y1はグラディエントの終点のy座標です。


gradient.addColorStop(stop, color);

stopは0.0から1.0までの数で、これはグラディエントの始点と終点の間の位置を表します。
colorは色を表します。

---

パターン

イメージやキャンバス、ビデオなどをパターンとして使用することもできます。

<canvas id="drawPatternRectangleCanvas" width="300" height="200"></canvas>
<script>
    (function() {
        var canvas = document.getElementById("drawPatternRectangleCanvas");
        var context = canvas.getContext("2d");
        var image = new Image();
        image.src = "http://blog.cnobi.jp/v1/blog/user/118c300f2ee0ad311e5962b0167205f5/1439584363";
        image.onload = function () {
            context.fillStyle = context.createPattern(image, "repeat");
            context.fillRect(0, 0, 300, 200);
        };
    })();
</script>

context.createPattern(image, repeat);

imageはイメージか、キャンバスか、ビデオです。
repeatはパターンの繰り返し方を示します。
たとえば"repeat"は縦と横に繰り返します。
"repeat-x"は横にだけ繰り返します。
"repeat-y"は縦にだけ繰り返します。
"no-repeat"は繰り返しを行いません。パターンは一度だけ表示されます。