fill属性でOK エレメントにグラデーションで色を塗る方法です。色を塗る方法は、 【Raphael.js】属性とは？ - RAPHAELIST でも触れたattr関数を使用します。単一色の塗りに関しては 【Raphael.js】エレメントを単一色で塗る方法 - RAPHAELIST で書いてますの…

fill属性 エレメントに色を塗る方法です。色を塗る方法は、 【Raphael.js】属性とは？ - RAPHAELISTでも触れたattr関数を使用します。今回は単純な単一色の色塗りを実践です。 実行結果 単一色なので超シンプル。再生ボタンで実行！ 解説 塗りつぶしはfill属…

attr関数 今まで散々、図形や線を描いてきましたが、今日は属性についてです。属性と難しく書きましたが、スタイルや装飾だと考えてもらえばOK。例えば、描画オブジェクトの透明度や境界線、塗の色などなどが属性にあたります。属性のコントロールにはattr関…

path関数 rect関数やellipse関数は丸や四角などの決まりきった形しか描画できませんでした。三角形など自由な形で図形を描画する時はpath関数を使用します。自由な形を描くのに、SVGの記法に則った文字を打ち込む必要がありますが、これはあまり覚える必要は…

image関数 今回はRapahel上での画像の取扱いについてです。Raphaelの関数で画像をベコッと埋め込む方法になります。使いどころはいろいろあると思いますが、SVGでは表現しきれない細かい描写や、スライドショーなどの実装面で役立ちそうな気がします。 実行…

好きなフォントを使うには？ 前回はprint関数でテキストを描画する方法を学びました。 【Raphael.js】print関数で文字を描画する - RAPHAELIST しかし、まだ気になる点があります。どのようにして、インストールされていないフォントをRaphael側で処理してい…

print関数 前回はtext関数で、簡単なテキストの描画を行いました。 【Raphael.js】最も簡単でシンプルなテキスト描画 - RAPHAELIST ただし、これはどちらかというとテキストの描画というよりは埋め込みです。今回は本当に描画しちゃいます。単純な埋め込みと…

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

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

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

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

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

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