矩形を描く-HTML5編

前のページでは、直線を繋げて多角形を描く方法を見ました。しかし矩形（四角形）はもう少し簡単に書くことができます。その方法を見てみることにしましょう。

矩形の輪郭を描く

矩形関連の命令には、以下のものがあります。

context.strokeRect(X座標, Y座標, 幅, 高さ): 矩形の輪郭を描画します。
context.fillRect(X座標, Y座標, 幅, 高さ): 中が塗りつぶされた矩形を描画します。
context.clearRect(X座標, Y座標, 幅, 高さ): 矩形で消去します。

最初に矩形輪郭を描いてみましょう。下のスクリプトを見てもらうと判りますが、 2D描画指定のgetContext()の所は1行で書くこともできます。

<canvas id="cv" width="360" height="240"></canvas>

<script>

var ctx = document.getElementById("cv").getContext("2d");  //今回は一行で指定

ctx.strokeRect(10,10,200,100);  //縦横共10pxの位置から、200px×100pxの矩形輪郭を描く

</script>

＜描画結果＞canvasタグにはCSSで二重線の枠を付けています

上記スクリプトを見て気付かれたでしょうか？矩形に関しては、 Pathを使わずに描画指定できます。この記述の方が簡単ですっきりします。四角形の場合はPathではなく、こちらを使っていきましょう。

矩形の塗り潰しと消去

今度は中が塗り潰された矩形と、矩形による消去について見てみたいと思います。以下のスクリプトで、大きな矩形の中がくり抜かれた図形を描けます。

<canvas id="cv2" width="360" height="240"></canvas>

<script>
var ctx2 = document.getElementById("cv2").getContext("2d");

ctx2.fillRect(10,10,200,100);  //縦横共10pxの位置から、200px×100pxの塗潰された矩形を描きます
ctx2.clearRect(20,20,50,50);   //縦横共20pxの位置から、50px×50pxの正方形でくり抜きます
</script>

＜描画結果＞canvasタグにはCSSで二重線の枠を付けています

次のページでは、円と円弧の描き方について見てみたいと思います。

前へ次へ