Kawa.net 旧ゆうすけブログ (Yahoo!版)

ここはもう更新しないので、http://www.kawa.net/ を参照して下さい

過去の投稿日別表示

[ リスト | 詳細 ]

全1ページ

[1]

ウェブページ内で「角の丸い矩形の中に文字を書く」ために、四隅に画像(主に透過GIFファイル)を配置するテクニックは10年近く前から使われてきたけど、今では、画像を使わずに角を丸くできるのね。

例) http://pro.html.it/esempio/nifty/nifty8js.html

使い方は、 JavaScript  で角を丸くする要素を指定していきます。
http://pro.html.it/esempio/nifty/
の説明されているライブラリを使用する。例えば、
   {{<div id="container">〜</div>}}
の角を丸くするためは、
   {{Rounded("div#container","#FFFFFF","#e7e7e7");}}
のように実行するだけ。お手軽だ!

いちいち↑Rounded() の行すら書きたくない場合は、さらにひと工夫すれば、
角を丸くすべき要素を  JavaScript  に自動で見つけさせることも可能だろう。
DIV タグの NAME の命名ルールを付けるとか。(***_roundとしておくとか)

   Windows Internet Explorer 6.0
   Windows FireFox 1.0
   Windows Opera 7.5

で動作確認しました。IE 5.0/5.5 や Mac OS だとどうなるんだろう?

開く トラックバック(99)

http://blogs.yahoo.co.jp/kawa_kawa_kawa_kawa/folder/161128.html で昨日、
サンプルの通りにスクリプトを書いてみたが、ページ全体には描けたけど
<DIV></DIV> 範囲をキャンバスとした場合は表示されなかった。 バグかなぁ?
と言っていましたが、やり直してみたら動きました。失礼しました。
ちゃんと HTML/HEAD/BODY タグを書かないといけないのかな。

http://www.kawa.net/sample/jsgraphics/sample1.html
var jg = new jsGraphics("myCanvas"); // draw into DIV element
jg.setColor("#0000ff"); // blue
jg.drawRect(250, 10, 100, 50);
jg.paint();
のように矩形を描けます。

全1ページ

[1]


.


プライバシー -  利用規約 -  メディアステートメント -  ガイドライン -  順守事項 -  ご意見・ご要望 -  ヘルプ・お問い合わせ

Copyright (C) 2019 Yahoo Japan Corporation. All Rights Reserved.

みんなの更新記事