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] 三角関数を使用する

JavaScriptで三角関数を使用するサンプルです。 サンプル 例)30度のサイン(正弦)を求める [crayon-5 ...

[JavaScript] 自然対数を求める(Math.log)

自然対数を求めるには、Math.log()を使用します。 構文 (a自然対数を求める) var x = Math.log ...

[JavaScript] canvasオブジェクトを生成する

JavaScriptでcanvasオブジェクトを生成する方法です。 サンプルソース 例)canvasオブジェクトを生成す ...

[JavaScript] ページを離れた時に処理を行う(onUnload)

ページを離れた時に処理を行うには、onUnloadイベントハンドラを使用します。 サンプルソース 例)ページを離れた時に ...

[JavaScript] 右クリックを禁止にする

ブラウザ上でのマウス右クリックを禁止にするには、 oncontextmenuイベントハンドラを設定します。 サンプル 例 ...

スポンサーリンク