JavaScript

[JavaScript] canvasの内容をクリアする(.clearRect)

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

canvasの内容をクリアするには、.clearRect()を使用します。

構文

(clearRect構文)
context.clearRect(w, y, w, h)
xクリア開始位置のX座標
yクリア開始位置のY座標
wクリアする横幅
hクリアする縦幅

サンプルソース

例)ボタンを押すとcanvasをクリアする

実行サンプル

ボタンを押すと、canvas領域に描画された画像をクリアします。

以下、枠内がcanvas領域です。

解説

  • クリアする範囲は明示的に指定する必要があります。
    (canvas内を全てクリアするという指定はありません。)

スポンサーリンク

スポンサーリンク

-JavaScript
-

執筆者:


comment

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

関連記事

[JavaScript] マウスポインタが触れた/離れたイベントを取得する(onMouseOver, onMouseOut)

オブジェクトにマウスポインタが触れたイベントを取得するにはonmouseover、 マウスポインタが離れたイベントを取得 ...

[JavaScript] ページを離れる直前に処理を行う(onBeforeUnload)

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

[JavaScript] 文字列を繰り返す

文字列を指定した回数繰り返した結果を取得するサンプルです。 サンプルソース 文字列を指定した回数繰り返した値を取得するに ...

[JavaScript] 関数をパッケージ化する

関数をパッケージ化して使うサンプルです。 同じような共通関数をパッケージ化しておくと、コードがとてもすっきりします。 サ ...

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

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

スポンサーリンク