RAPHAELIST

Raphael.jsは日本語ドキュメントが少ないので、初心者には敷居が高いのを何とかするブログ

2012-02-20から1日間の記事一覧

【Raphael.js】簡単な文字列を埋め込む方法

text関数 Raphael上でテキストを描画する方法です。 実行結果 今回はひとまずもっとも簡単なテキスト描画をします。その気になれば色んなWebフォントが使えたりしますが、今回は見送り。実行結果は以下の通り。Resultで結果が見れますよ。 解説 相変わらず簡…

【Raphael.js】楕円を描いてみる

ellipse関数 楕円の描画は簡単です。正円を描画するcircleと混同しないようにしましょう。 実行結果 早速実行結果です。依然、シンプルなコードです。ダイジョウブ!ソノウチムズカシクナッテクルヨ。 解説 正円のように半径を指定するのではなく、幅と高さ…

【Raphael.js】四角形を描いてみる

rect関数 ここでは四角形の描画を勉強しましょう。といっても、正円などと書き方は変わりありません。余裕です! 実行結果 jsfiddleさん、毎度お世話になります!Raphael.jsの最新Verを読み込めるのはあなただけ! 解説 特に正円と変わりはありません。しい…

【Raphael.js】正円を描く方法

circle関数 Raphaelで円を描いてみましょう。あまりに簡単過ぎるので肩の力が抜けると思います。今回描くのは5つの円です。それでは実行結果を見てみましょう。 実行結果 こちらが実行結果になります。Resultタブをクリックしてね。 解説 正円を描く関数はci…

【Raphael.js】描画エリアを決める

紙がなくては始まらない 例えば現実世界でも、何か絵を描くには、紙とペンが必要になりますよね。Raphael上でも紙とペンを準備してやる必要があります。といってもその書き方は本当に簡単です。 実行結果 以下が実行結果になります。Resultタブをクリックし…

Raphael.jsって?

Raphael.jsとは まずは簡単な説明から。Raphael.js(らふぁえるどっとじぇいえす)は超強力なSVG描画フレームワークです。これを上回るものには今までお会いしたことがありません。IE系でも動作するのがめっちゃいい感じです。 SVGとは 普段ブラウザ上で見る画…