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] ブラウザのサイズを取得する

表示中のブラウザのサイズを取得するには、 window.outerWidth / window.outerHeightま ...

[JavaScript] 文字列の文字数を取得する(.length)

文字列の文字数(長さ)を取得するサンプルFunctionです。 サンプルソース 文字列の文字数を取得するには、lengt ...

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

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

[JavaScript] Functionの引数を番号で参照する

Functionの引数を番号で参照するサンプルです。 通常引数の値を使う時は、引数に定義した名称を使用しますが、引数の何 ...

[JavaScript] 文字に下線/上線/取消し線を引く

JavaScriptで文字に下線/上線/取消し線を引くには、style.textDecorationを使用します。 サン ...

スポンサーリンク