Q&A
回答ありがとうございます。
色々試してみます。
前提・実現したいこと
前提としてプログラム自体はJavaScriptでcanvasに文字を描画する方法を参考にして作成いたしました。
実現したいこととしては、画像の上に文字を描画した際に全部削除するのではなく画像だけを残して
文字だけを削除したいです。
発生している問題
Canvasの削除について調べていく中で、**.clearRect()**を使うことで削除することができる
と分かったのですが、それを使うと画像も文字も消えてしまうため悩んでいます。
該当のソースコード
html
1<body onload="loadImage('preview');"> 2<p><canvas id="preview"></canvas></p> 3<p> 4<input type="text" id="canvas_text" value="文字"> 5<button onclick="drawText('preview', 'canvas_text');">入力</button> 6 <input type="button" id="btn1" value="消す" onclick="cls();"> 7</p>
javascript
1function loadImage(id) 2{ 3 //画像を読み込んでImageオブジェクトを作成する 4 var image = new Image(); 5 image.src = '[画像名]'; 6 image.onload = (function () { 7 //画像ロードが完了してからキャンバスの準備をする 8 var canvas = document.getElementById(id); 9 var ctx = canvas.getContext('2d'); 10 //キャンバスのサイズを画像サイズに合わせる 11 canvas.width = image.width; 12 canvas.height = image.height; 13 //キャンバスに画像を描画（開始位置0,0） 14 ctx.drawImage(image, 0, 0); 15 }); 16} 17//キャンバスに文字を描く 18function drawText(canvas_id, text_id) 19{ 20 var canvas = document.getElementById(canvas_id); 21 var ctx = canvas.getContext('2d'); 22 var text = document.getElementById(text_id); 23 //文字のスタイルを指定 24 ctx.font = '18px serif'; 25 ctx.fillStyle = '#000'; 26 ctx.textBaseline = 'center'; 27 ctx.textAlign = 'center'; 28 29 var x = (canvas.width / 2); 30 var y = (canvas.height / 1.7); 31 ctx.fillText(text.value, x, y); 32} 33//テキスト削除 34function cls(){ 35 ctx.clearRect(text.value, x, y); 36 }
試したこと
様々なサイトを参考にしましたが、解決には至りませんでした。
.clearRectで消す範囲を指定できると分かり色々試してみましたが上手くいっていない状況です。
補足情報（FW/ツールのバージョンなど）
Canvasについてわかる方がいましたらご教授いただければ幸いです。
回答4件
0
SVGで処理するほうが楽かもしれません
投稿2021/10/08 00:59
総合スコア116724
0
画像の上に文字を描画した際に全部削除するのではなく画像だけを残して文字だけを削除したい
不可能です。
画像のデータ(変数image)を保存しておいて、画像を書き直してください。
または、文字はHTMLで書いて<canvas>の上に上手いこと重ねるのも手です。
投稿2021/10/08 00:58
総合スコア21695
0
自己解決
多くの回答ありがとうございました。
結果として.clearRect()を上手く扱うことで解決をすることができました。
回答に書かれていたものはしっかりと今後に活かしていきたいと思います。
投稿2021/10/08 04:06
総合スコア5
0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/10/08 02:39