質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

489閲覧

canvasへ、テキストエリアからのvalueをリアルタイム反映ができません。

RyoheiHasegawa

総合スコア6

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/12/24 10:51

**既存のcanvasの上に、透明なsubCanvasを作り、その透明なcanvasに文字をfillStyleで描画しているのですが、このコードをsetInterval()でループさせると、文字が繰り返し描画されるのですが、
テキストエリアの値を削除しても、既に描画されたものがそのままになってしまっています。

ClearRect()も一緒に描画することが大切なのはわかるのですが、具体的にどのタイミングでClearRect()すれば、前回のインターバルの描画を消して、現在のテキストのみ描画することができるのでしょうか。

現在はfillText()の直前でclearRect()していますが、一向に改善しません。

理想は、このページにあるcanvasとテキストエリアの変化です。

皆様の知恵を貸していただければ幸いです。
よろしくお願いいたします。

また、可能であれば、決められた文字数で折り返しを行いたいのですが、そちらも合わせて、可能であればご教授願いたく思います。
**

JavaScript

1function createSubCtx() { 2 var subWidth = 250; 3 var subHeight = 250; 4 var fontSize = 12; 5 var x = 30; 6 var y = 70; 7 var lineHeight = 1.1; 8 var text = document.getElementById("story").value; 9 10 subCtx.save(); 11 strRotate(); 12 13 subCtx.beginPath(); 14 subCtx.font = "bold 16px serif"; 15 subCtx.textBaseline = 'middle'; 16 subCtx.fillStyle = 'rgba(255, 255, 255, 1)'; 17 18 console.log(text); 19 console.log(btn.href); 20 21 for( var lines=text.split( "\n" ), i=0, l=lines.length; l>i; i++ ) { 22 var line = lines[i] ; 23 console.log(line); 24 var addY = fontSize ; 25 if ( i ) addY += fontSize * lineHeight * i ; 26 subCtx.clearRect(0, 0, canvasWidth, canvasHeight); 27 subCtx.fillText( line, x + 0, y + addY ) ; 28 } 29 ctx.drawImage(subCanvas, 0, 0); 30 btn.href = canvas.toDataURL("image/png"); 31 subCtx.restore(); 32 }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

clearRectしてから全テキストを描画でいいと思うけど。

js

1const subCtx = subCnv.getContext('2d'); 2subCtx.fillStyle = 'white'; 3 4function render() { 5 requestAnimationFrame(render); 6 subCtx.clearRect(); 7 (story.text || '').split('\n').forEach((l, i) => { 8 subCtx.filltext(l, lineHeight * i); 9 }); 10}

投稿2018/12/24 11:57

turbgraphics200

総合スコア4267

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

RyoheiHasegawa

2018/12/24 12:23

ありがとうございます、いただいた回答をベースにメソッドを修正したところ、エラーは特に出ず、コンソールのtext変数にもしっかりテキストエリアのvalueが格納されているのですが、今度は文字が全く描画されません。 function createSubCtx() { var fontSize = 12; var x = 30; var y = 70; var lineHeight = 1.1; var text = document.getElementById("story").value; subCtx.save(); strRotate(); subCtx.beginPath(); subCtx.font = "bold 16px serif"; subCtx.textBaseline = 'middle'; subCtx.fillStyle = 'rgba(255, 255, 255, 1)'; console.log(text); requestAnimationFrame(createSubCtx); subCtx.clearRect(0, 0, canvasWidth, canvasHeight); (text || "").split( "\n" ).forEach((l, i) => { subCtx.fillText(l, x + 0, lineHeight * i); }); ctx.drawImage(subCanvas, 0, 0); btn.href = canvas.toDataURL("image/png"); subCtx.restore(); }
RyoheiHasegawa

2018/12/24 12:25

ClearRectの前にアニメーションのcallbackがきているために、そこまで辿りついていないなど、どのような原因が考えられますでしょうか? すいません、よろしければお願いいたします。
turbgraphics200

2018/12/25 10:37

createSubCtx()はどういったタイミングで呼び出されるのでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問