ねごとめも背景

    ねごとめも



    作成したプログラムは、こちらでも公開しています。
    よかったら覗いてみてください。_(┐「ε:)_
    → javascript,SVG で作成したプログラム置き場
    → プログラム一覧 - (2)

    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
    好きな選手権 :chara選手権
    好きなコーナー :リスナーが凸して
    椎名林檎の丸の内を歌うコーナー

    PC ゲーム歴 :
    モバゲーのタイピングゲームで
    タイピングの練習(サービス終了)
    ニックネーム : クッキー
    以降ゲーム歴なし

    [ YouTube ]

    chara : あいのうた
    椎名林檎 : ありあまる富
    かせきさいだぁ : じゃっ 夏なんで
    阿部真央 : 貴方の恋人になりたいのです

    最新記事

    カテゴリ

    カレンダー

    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
    広告: