忍者ブログ

Memeplexes

プログラミング、3DCGとその他いろいろについて

ブログでHTML5 Canvas パス



前回は長方形を色や塗りつぶしました。
今回はもっと基本的なことをやってみましょう。
線を描くのです。

<canvas id="drawLineSegmentCanvas" width="300" height="200"></canvas>
<script>
    (function() {
        var canvas = document.getElementById("drawLineSegmentCanvas");
        var context = canvas.getContext("2d");
        context.beginPath();
        context.moveTo(0, 0);
        context.lineTo(300, 200);
        context.stroke();
    })();
</script>




context.beginPath();

は、線を書く前に呼ぶメソッドです。


context.moveTo(x, y);

は、パスの位置を移動します。
xは移動後のx座標。
yは移動後のy座標です。


context.lineTo(x, y);

は、新たな点を付け加えます。
(このメソッド自体は線を描きません。線のデータを追加するだけです)
xは線の終点のx座標。
yは線の終点のy座標です。


context.stroke();

は、実際に描画を行います。
moveTo()やlineTo()で定義したパスを描くのです。

三角形

次のようにすると三角形を描けます。
<canvas id="drawTriangleCanvas" width="300" height="200"></canvas><br />
<script>
    (function() {
        var canvas = document.getElementById("drawTriangleCanvas");
        var context = canvas.getContext("2d");
        context.beginPath();
        context.moveTo(150, 0);
        context.lineTo(300, 200);
        context.lineTo(0, 200);
        context.lineTo(150, 0);
        context.stroke();
    })();
</script>




パスを閉じる
<canvas id="drawClosedTriangleCanvas" width="300" height="200"></canvas><br />
<script>
    (function() {
        var canvas = document.getElementById("drawClosedTriangleCanvas");
        var context = canvas.getContext("2d");
        context.beginPath();
        context.moveTo(150, 0);
        context.lineTo(300, 200);
        context.lineTo(0, 200);
        context.closePath();
        context.stroke();
    })();
</script>



context.closePathはパスを閉じます。







拍手[0回]

PR

ブログで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://file.memeplex.blog.shinobi.jp/ChromeIcon.JPG";
        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"は繰り返しを行いません。パターンは一度だけ表示されます。















拍手[0回]


ブログでHTML5 Canvas 長方形を描画

html5 canvasについてまとめようと思います。
まずは簡単な長方形の描画から
<canvas id="drawRectCanvas" width="300" height="200"></canvas>
<script>
    (function()
    {
        var canvas = document.getElementById("drawRectCanvas");
        var context = canvas.getContext("2d");
        context.fillRect(20, 40, 200, 100);
    })();
</script>



context.fillRect(x, y, width, height);

xは長方形の左上のx座標。
yは長方形の左上のy座標。
widthは長方形の横幅。
heightは長方形の縦幅。










拍手[0回]