JavaScript

[JavaScript] canvasに四角形を描画する(strokeRect、fillRect)

投稿日:2017年11月5日 更新日:

canvasに四角形を描画するには、strokeRectfillRectを使用します。

サンプルソース

例)canvasに四角形を描画する

実行サンプル

上記サンプルの実行結果です。

構文

strokeRectとfillRectの構文です。

(strokeRect構文)
strokeRect(開始x座標, 開始y座標, 描画幅, 描画高さ)
(fillRect構文)
fillRect(開始x座標, 開始y座標, 描画幅, 描画高さ)

解説

  • 枠のみの四角形を描画したい場合は、strokeRectを使用します。
  • 塗りつぶした四角形を描画したい場合は、fillRectを使用します。

スポンサーリンク

スポンサーリンク

-JavaScript
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[JavaScript] Javaが使えるかどうか判定する(navigator.javaEnabled())

Javaが使えるかどうか判定するには、navigator.javaEnabled() を使用します。 サンプルソース 例 ...

[JavaScript] 新規に開いた画面にSubmitする

新規に開いた画面にSubmitするサンプルです。 サンプルソース 例)ボタンを押すと 1000×500px の画面を開き ...

[JavaScript] クリップボードへコピー/切り取りを実装する

JavaScriptで、clipboardへのコピー/切り取りを実装するサンプルです。 サンプルソース 例)ボタンを押す ...

[JavaScript] 2進数、8進数、16進数の数値リテラル

数値リテラルで2進数、8進数、16進数を表す方法です。 2進数の数値リテラル 2進数を数値リテラルで表す場合は、2進数表 ...

[JavaScript] チェックボックスのチェック状態を取得する

チェックボックスのチェック状態を取得するサンプルです。 サンプルソース 例)ボタンを押すとチェックボックスの状態をアラー ...

スポンサーリンク