**既存の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 }
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/24 12:23
2018/12/24 12:25
2018/12/25 10:37