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] ステータスバーにメッセージを表示する(window.status、window.defaultStatus)

ステータスバーにメッセージを表示するには、 window.status、window.defaultStatus を使用 ...

[JavaScript] 文字列のバイト数を取得する

文字列のバイト数を取得するサンプルFunctionです。 サンプル 例)引数に渡された値のバイト数を取得するFuncti ...

[JavaScript] 日付を和暦で表示する

日付を和暦で表示するサンプルです。 toLocaleDateStringを使う方法 toLocaleDateString ...

[JavaScript] HTML内の文字を動的に変更する(innerText)

HTML内の文字を動的に変更するには、innerTextを使用します。 HTML内の文字を動的に変更するサンプル 例)i ...

[JavaScript] テキストボックスの初期値を取得する

テキストボックスなどの初期表示時に設定されていた値を取得するには、 defaultValueを使用します。 サンプルソー ...

スポンサーリンク