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] 一定時間後に処理を実行する

一定時間後に処理を実行するには、setTimeoutを使用します。 サンプル 例)5秒後に処理を実行する [crayon ...

[JavaScript] 小数点以下指定した桁数で四捨五入する(.toFixed)

小数点以下指定した桁数で四捨五入するには、.toFixed()を使用します。 サンプルソース 例)小数点以下指定した桁で ...

[JavaScript] ウィンドウサイズ変更時に処理を行う(onResize)

ウィンドウサイズ変更時に処理を行うには、onResizeイベントハンドラを使用します。 サンプルソース 例)ウィンドウサ ...

[JavaScript] 配列から要素を削除する

配列から要素を削除するサンプルです。 配列の全要素を削除する 配列の全要素を削除するには、ブランクで更新します。 [cr ...

[JavaScript] 符号を反転させる

符号を反転させるには、マイナスを付ければOKです。 サンプルソース 例)変数aの符号を反転させて変数resultに格納す ...

スポンサーリンク