フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(Javascript)Canvasの基本 矩形を描画する

描画の基本です。句形だけでも色々とプロパティがあるので、一応まとめてメモしておきます。

矩形の操作

矩形の描画はRectで行い、色の指定はstyleで行います。。線はstroke、面はfillで指定します。

  枠線(stroke)面(fill)
描画(Rect) strokeRectメソッド fillRectメソッド
色の指定(Style) strokeStyle(プロパティ) fillStyle(プロパティ)
太さ(width) lineWidth(プロパティ) ---

fillRect(x, y, width, height)
面を描画するメソッド。xとyは開始点、widthとheightは幅と高さになります。
strokeRect(x, y, width, height)
枠線を描画するメソッド。枠線に囲まれた内側は透明になります。
fillStyle
塗りつぶしの色のプロパティです。単色の場合はCSSと同じ方法で指定して、グラデーションで行う場合はLinerGradientオブジェクトを渡します。
strokeStyle
枠線の色のプロパティです。指定方法はfillStyleと同じです。
lineWidth
枠線の太さをピクセルで指定します。
サンプルコード
// 面を描画
context.fillStyle = '#ffccaa';
context.fillRect(0, 0, 100, 100);

// 線を描画
context.strokeStyle = '#999999';
context.strokeRect(5, 5, 100, 100);

// 色と太さを変えて再度線を描画
context.strokeStyle = '#3366ff';
context.strokeRect(0, 25, 110, 20);

上記のサンプルは以下のように描画されます。
f:id:jmqys:20150923155910p:plain