
下記を参考に、canvasを使ってマウスで線を描ける仕組みをつくっているのですが、描いた線を全て消す方法がわからずに困っています。
https://gist.github.com/Cartman0/436459b9b85cfdd …
canvasのエリア内ではなく、canvasを置いているHTMLにあるaタグでくくったリンクを押すことで非同期によって消したいのですが、どのようなコード(関数?)を書いて、どのように実行すればよいのでしょうか。
ご存知の方がおられましたら、ご回答いただけますと幸いです。よろしくお願いいたします。
No.2ベストアンサー
- 回答日時:
ANo1です。
解決したのかどうかわかりませんが・・・
一番簡単な例として、ご提示のサンプルに以下を追加すればクリアできるようになりますね。
◆HTML
<div><a href="#" id="hoge">クリア</a></div>
◆SCRIPT
//7.キャンバス クリア処理
document.getElementById('hoge').addEventListener('click', function(e){
ctx.clearRect(0, 0, 540, 320);
e.preventDefault();
}, false);
具体的なコードまでご提示いただきまして、ありがとうございました!これだけのことでたくさんの学びがありました。せっかく持っているオライリーの本を本棚の肥やしにしていないで、きちんと学びたいと思います。
No.1
- 回答日時:
こんにちは
canvasに描かれた線や図形等は全体でひとつの図になっています。
これをクリアするには、clearのメソッドを利用するか、新しく(上から)矩形等で塗り潰すことでも可能です。どちらの場合も範囲の指定が出来ますので、全体とは限らず部分的な消去をすることもできます。
(範囲にcanvas全体を指定すれば、全消去になります)
具体的なメソッドとしては、clearRect()またはfillRect() メソッドなどを利用なされば良いでしょう。
http://www.html5.jp/canvas/ref/method/clearRect. …
>canvasを置いているHTMLにあるaタグでくくったリンクを押すことで
>非同期によって消したいのですが~
ページ内で完結している処理なので、非同期云々は関係ないと思いますが、該当するリンク要素のクリックイベントとして、上記のctx.clearRectなどの処理を設定しておけば実現できるはずです。
ただし、ご提示のサンプルではctxオブジェクトが匿名関数のなかで設定されていますので、そのスコープの範囲内に記述する必要がありますね。
丁寧なご回答をいただき、ありがとうございました。
canvasの概念的なことも漠然としていて、手のつけようがなかったので、大変、参考になりました。
また、匿名関数の辺りも曖昧だったので、ご指摘いただき、大変、ありがたいです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(プログラミング・Web制作) 次に、楽天のアジャイル就活に参加して、1日で内定を獲得できる。私は大企業に就職できる? 2 2022/04/17 13:38
- 美術・アート トレパク疑惑をかけられにくくするには ここ最近いわゆるトレパク警察のいいがかりがが厳しくなったようで 1 2023/08/21 09:59
- その他(プログラミング・Web制作) Pythonによる物理の斜方投射の位置座標表示について 2 2023/06/05 12:46
- 画像編集・動画編集・音楽編集 ワード。頂点の編集。 4 2022/09/28 14:14
- その他(プログラミング・Web制作) Pythonにおける物理のシミュレーションでの単位変換について 2 2023/06/02 17:11
- 芸術学 透視図法の消失点は、どこに? 1 2023/06/14 00:09
- JavaScript 変数のスコープの問題? 3 2022/06/23 09:32
- その他(悩み相談・人生相談) 下描きの時や普通にイラストを描く時、なぜ一定数、短い線を沢山重ねて描く人がいるのですか? スーッて一 1 2023/01/29 02:32
- マンガ・コミック 漫画の練習方について 1 2022/06/06 19:26
- デザイン スタイラスペンでの描画における遅延 1 2023/06/10 15:41
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
エクセルVBAで、条件に一致する...
-
0歳児の指しゃぶりに関して
-
mainメソッドのthrows節で設定...
-
frameとgetメソッド
-
javascriptからjavaを呼び出したい
-
配列のメソッド
-
Eclipse、clone利用時に型の安...
-
VBA コピーが出来ません…!
-
vbaエクセルマクロ RemoveDupli...
-
例外処理についてお願いします!!
-
エクセルVBAにおけるON TIMEメ...
-
final修飾子を使っているのに、...
-
Javaはmainメソッドからじゃな...
-
コマンドプロンプト実行後に画...
-
一般的な引数の順序
-
Exec時のCMD.EXE画面は結局回避...
-
ページングについて
-
アプレット
-
アプリケーション内でのダブル...
-
JAVA言語について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
エクセルVBAで、条件に一致する...
-
【sendkeysメソッドが動かずに...
-
mainメソッドのthrows節で設定...
-
VBA コピーが出来ません…!
-
DataGridViewでセルクリックイ...
-
コマンドプロンプト実行後に画...
-
0歳児の指しゃぶりに関して
-
エクセルVBAにおけるON TIMEメ...
-
javascriptからjavaを呼び出したい
-
配列のメソッド
-
CALLされていないメソッドを見...
-
final修飾子を使っているのに、...
-
Labelコントロールに数字を代入...
-
VBPをダブルクリックするとたま...
-
ウィンドウを最前面にできません
-
処理内容がほぼ同じメソッドの...
-
Application.Wait の参照設定
-
C#.net Define文
-
C# 演算 最大値 最小値 表現の仕方
-
Excel VBA でExcelを終了したい...
おすすめ情報