ねごとめも背景

ねごとめも

数学、電気の勉強始めました!プログラムにも挑戦しています!|ω・)ノ


作成したプログラムは、こちらでも公開しています。
よかったら覗いてみてください。_( _´ω`)_
→ javascript,SVG で作成したプログラム置き場

canvas : テキスト描画[word-wrap:break-word](2018/02/21)

前回のテキストの背景に罫線を引くプログラムで使用した
document.createRange() を使って、
css で .textarea{word-wrap:break-word} を指定した
テキストエリアのテキストを canvas 要素へ描画してみました。

前回のプログラム
テキストの背景に 罫線を引く (2018/02/20)

span 等の要素の中にテキストを順に入れて
テキストの位置を取得する方法を試したのですが、
確認した範囲で、半角のみのテキストでは
ズレること無く描画出来たのですが、
全角、半角が混在しているテキストでは、
ブラウザで処理の方法が違うようで
表示されているテキストを
そのまま canvas へ描画することが
出来ませんでした。

document.createRange() で
テキストの位置が取得できるなんて
知らなかった。。。_(┐「ε:)_


2018/02/21 [08:27]

テキストの背景に 罫線を引く (2018/02/20)

前回のテキストの背景に罫線を引くプログラムの
文字の位置(罫線の描画位置)の取得方法を変更してみました。

前回のプログラム
canvas : 罫線 | Vertical Rhythm ? 描画 テスト2

前回のものは、非表示にした要素の中に
テキスト | 要素 を順に入れて、
その高さから罫線の描画位置を出しています。
今回のは、 document.createRange() を使用しています。
テキスト | 要素 を頭から順に選択して、
その矩形の値から罫線の描画位置を取得しています。

テストした範囲では、 Chrome, Firefox では以前の方法より
処理にかかる時間は短いようです。
Edge では激重でした。

Firefox での使用は問題なさそうなのですが、
Chrome, Edge では、表示域外にある要素に
罫線が描画されない事がありました。
ページ読み込み位置がページの上部なら、問題なく描画。
ページをスクロールした状態で読み込みを掛けると、
途中の罫線が抜けてしまうようです。
詳しいことは分からないのですが、
ページ読み込み後のスクロールイベントで
テキストの選択のプログラムが
中断されているのかも知れません。(?_?)


2018/02/20 [15:34]

カウンター

プロフィール

negotoy

Author:negotoy
電気の勉強始めました!
テキストエディタを使ってプログラミングに挑戦中。fc2 ブログに公開しているテンプレート等は、自由にカスタマイズして、ご活用ください。プログラム実行の前に必ずコードの確認をお願いします。

最新記事

カテゴリ

カレンダー

01 | 2018/02 | 03
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 - - -


PAGE TOP
広告: