2017-09-27
重ね合わせと文字遅延描画の実験
なでしこ3 |
前回、丸ボタンの押すと凹む動作のために、positionとtopの値を設定することを学んで気が付いたんですが、positionの値にabsoluteを指定すると、絶対位置を指定をすることが出来るんですね。
そして、z-indexで重ね合わせの順番も指定できるようです。
そうすると、canvasの上にボタンを乗っけたりも出来るだろうし、なんと透明色が使えるので、画像合成しなくても、背景にキャラや文字を重ねたりができそう!
・・・と思って、やってみた。
<script type="なでしこ"> #----------------------------------------------------------------------- 「canvas#cv_1」のDOM要素取得。 「canvas#cv_2」のDOM要素取得。 #背景を一旦白く。 「cv_1」へ描画開始。 白色に線色設定。 白色に塗り色設定。 [0,0,640,480]へ四角描画。 #裏でテキストウィンドウ作成。 「cv_2」へ描画開始。 「rgba(0,0,0,.5)」に線色設定。 「rgba(0,0,0,.5)」に塗り色設定。 [0,320,640,160]へ四角描画。 #背景を描画。 「cv_1」へ描画開始。 [0,0]に「../image/kaminoko.jpg」の画像描画。 #テキストウィンドウを表に出す。 「テキストウィンドウ」を1秒後。 #文字をテキストウィンドウに描画 描画文字=空配列。文字X=0。文字Y=0。数=0。 文字サイズ=36。 1.5秒後には 「cv_2」へ描画開始。 「{文字サイズ}px MS Pゴシック」に描画フォント設定。 白色に塗り色設定。 // [30,380]に「ここは神の子池です。」を文字描画。 30,380に「ここは神の子池です。」を文字遅延描画。 ここまで。 #----------------------------------------------------------------------- ●テキストウィンドウ 「#cv_2」の「z-index」に「2」をDOMスタイル設定。 ここまで。 #----------------------------------------------------------------------- ●文字遅延描画(X,YにSを) 描画文字=Sを文字列分解。 文字X=X。文字Y=Y。 遅延描画反映。 ここまで。 ●遅延描画反映 数2=描画文字の配列要素数。 #「描画文字の配列要素数」を直接入れたらダメみたい? もし、数<数2ならば、 [文字X,文字Y]に描画文字[数]を文字描画。 数=数+1。文字X=文字X+文字サイズ。 「遅延描画反映」を0.2秒後。 ここまで。 ここまで。 #----------------------------------------------------------------------- </script> <H1>なでしこ3てすと~重ね合わせの実験(文字遅延描画も)</H1> <HR> <style type="text/css"> #cv_1 { position:absolute; top: 230px; left: 100px; z-index: 1; } #cv_2 { position:absolute; top: 230px; left: 100px; z-index: -1; } </style> <div style="height:550px"> <canvas id="cv_1" width="640px" height="480px"></canvas> <canvas id="cv_2" width="640px" height="480px"></canvas> </div>
http://snowdrops.starfree.jp/wnako3_test/07_layer_test_00.html
しかし・・・うーん、そうとうに無理矢理すぎる;
文字幅取得が無いので、ピクセルで指定してますが、文字によってはだいぶ間延びした感じになっちゃいますね。
それに、秒待つが無くて、秒後や秒毎でと考えますが、なかなか難しいです・・・><
秒後は、秒待つと違ってプログラムは止まらないので、その下の命令が先にどんどこ実行されてしまうんだよね
topの値は、最初パソコン上では100くらいで良さげでしたが、ジオシティーズにUPしてみたら、広告が入るのでタイトルに被っちゃいまして、下げました。
しかし、今度コレをパソコン上で実行したら、これまたタイトルの下が間延びした感じになっちゃう。
絶対指定だと、そうゆうのも全部やらないと、おかしなコトになっちゃうんですねー。
でも、まあ、取りあえず出来るってコトは分かりました!
コメントを書く
トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20170927