javascript
快速上手RaphaelJS--RaphaelJS_Starter翻译（一）
RaphaelJS是一個矢量繪圖包，用來在瀏覽器中繪制圖形。 在這部分，我們將了解到RaphaelJS是什么、它與其它同類的繪圖包有什么不同，它如何從html5 Canvas中脫穎而出。 雙頭和三個字母 差不多十年前，我們有一個技術大突破稱為：可縮放矢量圖形（SVG）。SVG可縮放矢量圖形（Scalable Vector Graphics）是基于可擴展標記語言（XML），用于描述二維矢量圖形的一種圖形格式。SVG是W3C("World Wide Web ConSortium" 即 " 國際互聯網標準組織")在2000年8月制定的一種新的二維矢量圖形格式，也是規范中的網絡矢量圖形標準。SVG嚴格遵從XML語法，并用文本格式的描述性語言來描述圖像內容，因此是一種和圖像分辨率無關的矢量圖形格式。盡管SVG基于VML發展而來，但是SVG和VML不能在一個瀏覽器中同時協調工作。SVG可以運行在所有除了版本低于IE9的的IE之外的瀏覽器。 一個兩頭和三個字母的頭疼事兒。 （IE就是喜歡雞立鶴群！） 兩個問題的結合以及RaphaelJS的誕生 SVG曾是一個美妙的新生兒，但是沒人想要承受分娩之痛--使用SVG和VML進行跨瀏覽器的代碼編寫太難以致大部分開發者直接用圖片去了。因為我們有兩種不同的技術，但是他們用不同的語法去完成同樣的事情，但是他們卻不能共存在一個瀏覽器中。讓它們在一個和諧相處有點困難。 Javascript--求同存異 Javascript最終解決了他倆不能和諧相處的問題，那就是RaphaelJS。 瀏覽器支持 絕大部分瀏覽器都支持SVG，ie的所有5.0以上版本都支持VML。而RaphaelJS可以讓他們倆在所有瀏覽器上都運行。RaphaelJS---兩棲動物！ 什么事RaphaelJS，什么不是？ 我們已經知道RaphaelJS是SVG和VML的結合并可以獲得瀏覽器支持。它是萬能而且可靠的。但是我們還得知道那些不是RaphaelJS處理的東西。 一些關于矢量圖和位圖的知識 其實就是講圖形有兩種類型：位圖和矢量圖，位圖放大失真而矢量圖放大不失真。因為位圖是建立像素基礎上的，所以放大失真。而矢量圖是通過特殊數學算法來實現放大不失真。 如圖所示，瓶子上面的字體放大仍舊很清晰的就是矢量圖，模糊的就是位圖。 RaphaelJS，一個矢量圖包 RaphaelJS作為一個矢量圖包，它所以繪制的內容是一個真正的DOM節點。因此它可以被動態的訪問、操作、變化大小并敲打錘煉成為其它你想要的圖形。更有意思的是它們可以綁定比如點擊、懸停、移出等鼠標操作。RaphaelJS的功能簡直令人難以置信。 RaphaelJS的x,y坐標系 RaphaelJS使用x,y坐標系去繪制圖形。屏幕最左上角為0,0位置然后水平為x軸，垂直為y軸。 所以，如果代碼里出現(15,20)意思就是這個點位于x軸15個點（水平），y軸20個點的位置（垂直）。 RaphaelJS作為一個矢量圖包，繪制時根據瀏覽器選擇使用SVG或者VML。因為繪制出來是一個實際存在的DOM節點，所以可以賦予點擊、懸停等操作。這些都是很有趣的地方。 【RaphaelJS和HTML5 Canvas是2個截然不同的東西。盡管它們所做的事情很相似：繪畫。但是它們的實現方式并不相同。RaphaelJS以矢量繪制為基礎，而HTML5 Canvas則是以光柵為基礎 】 安裝 安裝和搭建RaphaelJS非常簡單。你只要下載最新的RaphaelJS的版本然后它引用到html中就行了。 簡單的3步，你就可以安裝好RaphaelJS并且開始使用了。 第一步：我需要什么？ 在你安裝RaphaelJS之前，你需要檢查你是不是準備好了如下的東西： 1、瀏覽器； 2、文本編輯器 第二步-下載RaphaelJS 最簡單的獲取方式就是從https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js 去下載。RaphaelJS和別的包不同，它沒有其它任何依賴，就是這一個文件。這個鏈接讓你下一個文本，所以你只要把它復制粘貼到一個文本文件改名叫做raphael.js或者其它名字就行了。 raphael下載 第三步-添加RaphaelJS到html中 <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Raphael Test</title> </head> <body> <div id="my-canvas" style="width:140px;padding:0px;margin:0px;"> </div> <!--some html doms--> <!--some scripts--> <script type="text/javascript" src="../js/lib/raphael.js"> </script> </body></html>
代碼和原書細節可能不同，是我自己測試用例，總體按照原書來寫的。
【注意這里，此書里面講解了為什么要把引用raphael.js 放置在html元素的最下方。因為瀏覽器執行html的代碼是順序執行的。你如果把引用放在前面，瀏覽器會先加載它，導致中間有段時間頁面會停滯，這里推薦你先加載dom元素再導入這個js包。】
到此位置，我們的下載和搭建就已經完成了。
在瀏覽器視口創建畫布
創建raphael物體（對象），依賴于raphael的方法和function，如下所示：
var raphaelObj = Raphael(x,y,width,height);?
Raphael function中4個參數分別是x坐標、y坐標、寬度、高度。
因為這個是在瀏覽器視口里面來創建的，所以畫布的位置是絕對定位。因此，它會在所有html元素下面重疊。
比如：
// 在瀏覽器視口中創建畫布
var paper = Raphael(20, 30, 650, 400);
?
這里的Raphael對象被初始化并且分配一個變量稱為paper。這個變量被賦予RaphaelJS的所有權利。它從此以后成為Raphael畫布對象。
在元素中創建Raphael對象(推薦)
要在一個元素中初始化一個Raphael對象，我們必須把這個元素的ID或者這個元素本身加入到坐標系(x,y)中。
我們舉個例子：
//元素本身作為參數
//This line creates a Raphael paper inside 'my-canvas', which is 650pxin width and 400px in height
var elm= document.getElementById("my-canvas");
var paper = Raphael(elm, 650, 400);
//or
// 直接傳遞元素的ID作為參數
//This line also creates a Raphael paper inside 'my-canvas', which is?650px in width and 400px in height
var paper = Raphael("my-canvas", 650, 400);
?
這樣我們就可以啟動引擎開始跑了！
?第二步--繪制圓形
Raphael可以繪制的基本圖形有圓形、矩形和橢圓等。
圓形可以通過調用circle()來發來進行。我們使用剛才的paper對象來進行調用。
語法如下：
var cir = paper.circle(x,y,r);
// x and y are the positioning co-ordinates, and "r" is the radius of?the circle
//Here the circle is assigned to a variable called cir.
//Example
var cir = paper.circle(35,25,20);
// This will create a circle of 20 pixels in radius at 35,25 (X & Y?axis).
?
circle()方法一共3個參數，分別是x,y坐標和半徑。我們在剛才的代碼中添加上面的操作。
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Raphael Test</title> </head> <body> <div id="my-canvas" style="width:140px;padding:0px;margin:0px;"> </div> <!--some html doms--> <!--some scripts--> <script type="text/javascript" src="../js/lib/raphael.js"> </script> <script type="text/javascript"> var paper = Raphael("my-canvas", 650, 400); var cir = paper.circle(30, 30, 10); </script> </body></html>?
?效果如上圖所示，由于沒有賦予paper和cir其它屬性，所以沒有顏色之類的屬性，我們看起來不直觀。下面將介紹attr()方法。
attr() 方法
attr()方法，將我們要添加或者修改的屬性作為參數，屬性其實就是鍵值對。如果你熟悉jQuery的話，你就明白attr()的語法與jquery的完全一致。進一步講，就是JSON格式數據。做過js的童鞋們，或多或少應該接觸過JSON。沒接觸過的，建議去翻閱一下資料。比XML更快的數據傳遞方式，以后肯定會大放異彩。
語法如下：
element.attr({
"Property1":value1,
"Property2":value2
})
//加入如下屬性的鍵值對
var coloredCircle = paper.circle(35,25,20).attr({
"fill":"#17A9C6",
"stroke":"#2A6570",
"stroke-width":2
});
剛才這個例子添加到我們的Script里面就行了，這里不再截圖和添加代碼了。效果是：在坐標（35，25）位置出現一個半徑為20的顏色為深綠的圓（本人色弱，顏色認錯大家莫怪）。
當然，還有其它非常多的屬性可以添加。有興趣大家可以自己去查閱一下資料，這里暫不提及。本書最后部分會有涉及。
下面我們要講的部分是本書的重點，也是學習Raphael.js的重點。上面講了那么多其實不過是三兩行代碼就可以搞定的事情，前提是你正確的下載了包并引用了正確的路徑。接下來我們要講的是創建、操作、轉換、動畫、事件響應等內容，是Raphael的核心部分，也是工作涉及到的重要部分。
你需要了解的重要特性
?創建一個Raphael的元素非常容易。為了更加方便，有些已經定義好的方法供生成一些基本的幾何圖形。
基本圖形
RaphaelJS有3個基本圖形，分別是 圓、橢圓和矩形。前面已經講過圓形，這里我就不再贅述圓形了。
矩形
我們可以使用rect()方法來創建一個矩形。這個方法一共有4個必須參數和一個可選參數。5個參數按順序分別是x坐標、y坐標、矩形寬度、矩形高度、圓角半徑。
圓角半徑默認為0，為可選參數。
語法如下：
paper.rect(X,Y,Width,Height,border-radius(optional));
var rect = paper.rect(35,25,170,100).attr({
"fill":"#17A9C6", //filling with background color
"stroke":"#2A6570", // border color of the rectangle
"stroke-width":2 // the width of the border
});
圓角矩形：var rect = paper.rect(35,25,170,100,20).attr({?
"fill":"#17A9C6", //filling with background color?
"stroke":"#2A6570", // border color of the rectangle?
"stroke-width":2 // the width of the border
});
代碼如下： <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Raphael Test</title> </head> <body> <div id="my-canvas" style="width:140px;padding:0px;margin:0px;"> </div> <!--some html doms--> <!--some scripts--> <script type="text/javascript" src="../js/lib/raphael.js"> </script> <script type="text/javascript"> var paper = Raphael("my-canvas", 650, 400); var cir = paper.circle(30, 30, 10); var coloredCircle = paper.circle(55, 45, 20).attr({ "fill": "#17A9C6", "stroke": "#2A6570", "stroke-width": 2 }); var rect = paper.rect(65, 65, 120, 80).attr({ "fill": "#17A9C6", //filling with background color "stroke": "#2A6570", // border color of the rectangle "stroke-width": 2 // the width of the border }); var rect1 = paper.rect(190, 65, 120, 80,20).attr({ "fill": "#17A9C6", //filling with background color "stroke": "#2A6570", // border color of the rectangle "stroke-width": 2 // the width of the border }); </script> </body></html>?效果如下：
?
橢圓 橢圓的方法是ellipse(),有4個必要參數。分別是x坐標、y坐標、水平半徑、垂直半徑。水平半徑和垂直半徑其實就是橢圓的寬和高除以2。 語法如下：paper.ellipse(X,Y,rX,rY);
var ellipse = paper.ellipse(195,125,170,100).attr({?
"fill":"#17A9C6", // background color of the ellipse?
"stroke":"#2A6570", // ellipse's border color
"stroke-width":2 // border width
});
由于和上面矩形的代碼幾乎一致，除了參數意義。這里不再重復代碼和截圖。 復雜圖形 建立上面那種基本圖形可以說非常簡單。但是復雜圖形，比如五角星、八角形等怎么辦？它們根本不是圓或者矩形或者橢圓。 這是Raphael的另外一個奇異之處。 復雜圖形的創建將使用path()方法。它只有一個參數，我們稱它為pathString。看上去就是一串字母和數字的組合。其實它非常易于閱讀和理解。 在這之前，我們先想象一下自己畫復雜圖形的場景。其實你拿一支筆在紙上畫畫的話，就好像你從一個起點開始，不斷的連線到構成你的圖畫。其實這里的機制就是如此，通過線的連接來構成復雜圖形，連線可以使直線也可以是曲線。Paper.path([pathString])
pathString?SVG格式的路徑字符串。路徑字符串由一個或多個命令組成。每個命令以一個字母開始，隨后是逗號（“,”）分隔的參數。例如："M10,20L30,40"
我們看到兩個命令：“M”與參數(10, 20)和“L”與參數(30, 40)大寫字母的意思是命令是絕對的，小寫是相對的。
這里是可用命令的簡表，詳細內容請參照：SVG路徑字符串格式?。
| M | 移動到（moveTo） | (x y)+ |
| Z | 閉合路徑（closepath） | (none) |
| L | 直線（lineTo） | (x y)+ |
| H | 水平直線 | x+ |
| V | 垂直直線 | y+ |
| C | 曲線（curveto） | (x1 y1 x2 y2 x y)+ |
| S | 平滑曲線 | (x2 y2 x y)+ |
| Q | 二次貝賽爾曲線 | (x1 y1 x y)+ |
| T | 平滑二次貝塞爾曲線 | (x y)+ |
| A | 橢圓弧 | (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+ |
| R | Catmull-Rom 曲線* | x1 y1 (x y)+ |
* “Catmull-Rom 曲線”不是標準SVG命令，在2.0版時被加入。 注：有種特殊情況，路徑只包含三個命令：“M10,10R…z”。在這種情況下，路徑將平滑連接到它的起點。
語法如下：
paper.path("pathString");
var tri = paper.path("M0,0L26,0L13,18L0,0").attr({
"fill":"#17A9C6", // filling the background color
"stroke":"#2A6570", // the color of the border
"stroke-width":2 // the size of the border
});
具體例子的介紹稍后，這里先說明一下，上面的命令都是命令+參數這樣子的。但是命令有大小寫的區別，其效果也不同。大寫表示絕對，小寫為相對。比如(M20,20)表示從（0,0)位置來計算的，而(m20,20)則是相對畫筆的位置（dom位置）來計算。 在這里你可能會感覺很頭大，因為這么多命令，還有幾個挺難理解的曲線。再加上復雜圖形怎么可能直接就寫一串字符出來。其實不必擔心，因為復雜圖形你可以使用工具來進行繪制。在矢量圖制作工具中制作完成然后導出svg格式就行了。推薦使用一個叫做inkscape的矢量圖制作工具。 （2014-01-07接上） 首先說下，昨天文章里面有個內容是js的引用在body底下位置，這里其實如果你使用jquery或者dojo等框架，可以等document加載完成加入那些js就行了。比如$(document).ready(function(){})這樣子的。 下面舉一些例子來講解下path里面的那些命令。 <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Raphael Test</title> </head> <body> <div id="my-canvas" style="width:140px;padding:0px;margin:0px;"> </div> <!--some html doms--> <!--some scripts--> <script type="text/javascript" src="../js/lib/raphael.js"> </script> <script type="text/javascript"> var paper = Raphael("my-canvas", 700, 600); //1、直線使用path命令L paper.path("M20,20L100,20z").attr({ "fill": "#5DDEF4", "stroke": "#2A6570", "stroke-width": 2 }); //2、三角形使用Path命令L paper.path("M130,30 L200,30 L160,90 z").attr({ "fill": "#5DDEF4", "stroke": "#2A6570", "stroke-width": 2 }); //3、T形使用Path命令H,V paper.path("M 40,40 H 90 V 60 H 70 V 110 H 60 V 60 H 40 z").attr({ "fill": "#5DDEF4", "stroke": "#2A6570", "stroke-width": 2 }); //4、2次貝塞爾曲線形，使用path命令Q paper.path("M240,40L300,40L300,100"); paper.path("M240,40Q300,40 300,100").attr('stroke', 'red'); //5、2次貝塞爾曲線形，使用path命令Q和T（第一個是正常繪制，第二個光滑連接） paper.path('M10,250 L90,130 L160,160 L250,190 L250,70'); paper.path('M10,250 Q90,130 160,160 T250,70').attr('stroke', 'red'); //6、繪制3次貝賽爾曲線，使用命令C，平滑畫線使用命令S paper.path('M320,120 L350,180 L450,260 L480,140'); paper.path('M320,120 C350,180 450,260 480,140').attr('stroke', 'red'); paper.path('M320,120 S450,260 480,140').attr('stroke', 'yellow'); </script> </body></html>代碼里面刪除了上面文字里面的基本圖形的繪制代碼。為了節省空間，這里就使用這些繪制path的代碼。上面代碼中一共6個小模塊，使用了path命令中最后2個之外的其它所有命令。最后兩個待會兒解釋。先解釋上面幾個。代碼運行效果圖如下：
?
這里說明下，原書這里是去inkscape里面里面用inkscape自帶的一些工具畫了一些星星之類的圖形，這里我們是直接寫的path命令串，可以更加容易地加深對于path的理解。我們看運行效果圖，一共有6個圖形。我們上面的代碼塊也有6小塊，分別對應瀏覽器上面的6個圖形。 繪制直線，準確的說是繪制連線，我們代碼內容是這樣的： paper.path("M20,20L100,20z")這里，pathString為M20,20L100,20z，我們查看上面的path命令表。發現執行情況是這樣的：我們的筆移動到坐標(20,20)的位置，連一條線到(100,20),閉合path。也就是上面6個圖形中的最左上角的那個線段。 接下來是那個三角形： paper.path("M130,30 L200,30 L160,90 z")三角形這個命令和上面線段是一致的，只是多連了一次，構成了一個三角形。這里我們是可以明白，只要你不斷的用L命令去連接，其實可以構成任意復雜的圖形。下面我們繼續講解第三個代碼塊： paper.path("M 40,40 H 90 V 60 H 70 V 110 H 60 V 60 H 40 z")這里我們用到了H和V命令，這倆命令我們通過查看path命令表可知道它們分別是橫著和豎著連線。所以剛才上面那行代碼的執行情況是：我們的筆移動到(40,40)，水平線連接到x坐標90，垂直線連接到60，水平線······如此反復，需要注意H和V后面跟的不是線的長度而是坐標，最后我們閉合path得到一個T的圖形。這個其實使用上面那個L命令也可以做到，但是水平和垂直命令名對于這種0角度或者90度的線處理起來更加容易。 第四塊代碼如下： paper.path("M240,40L300,40L300,100");paper.path("M240,40Q300,40 300,100");這里我們第一行代碼是畫兩條線段，上面講解到了，只不過這里沒有z結尾來閉合path。第二行代碼使用的坐標與第一個完全一致，只不過兩個L命令換成了Q，我們查看命令表，Q表示二次貝塞爾曲線，效果大家可以看靠上位置的那個曲線和曲線附著的的線段。Q命令的后的坐標含義可以通過上面線段的坐標來得知。 第五個代碼塊如下： paper.path('M10,250 L90,130 L160,160 L250,190 L250,70');paper.path('M10,250 Q90,130 160,160 T250,70'); 這里的效果圖是上面圖形中最大那個圖形。其實如果理解了第四個圖形，這個很好理解。唯一的不同就是這里使用了T命令，這個T和接下來的S命令很相似，就是分別對應Q和S的平滑曲線畫法，生活他們中間的那個坐標，而直接使用后一（兩）個坐標即可。第六個代碼塊如下： paper.path('M320,120 L350,180 L450,260 L480,140');paper.path('M320,120 C350,180 450,260 480,140').attr('stroke', 'red');paper.path('M320,120 S450,260 480,140').attr('stroke', 'yellow');看到最后一幅圖，我們看的到一條紅色曲線和一條黃色，兩個圖形的區別就是命令中缺省第一個坐標的區別。上面第5個圖形也可以做成類似第六幅圖的曲線對比圖，大家可以稍微修改一下代碼就能搞定了。當然這里其實曲線的每個附著的線段是不是必要存在，為了加深理解，我們將它畫了出來。關于橢圓曲線，這里我直接引用http://lblovesnow-163-com.iteye.com/blog/1485388這個博客博主的測試用例吧。這個博主寫的這些測試用例非常到位，我就借花獻佛了。代碼如下： <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Raphael Test</title> </head> <body> <div id="my-canvas" style="width:140px;padding:0px;margin:0px;"> </div> <!--some html doms--> <!--some scripts--> <script type="text/javascript" src="../js/lib/raphael.js"> </script> <script type="text/javascript"> var paper = Raphael("my-canvas", 700, 600); //繪制左上的橢圓 paper.ellipse(130,40,60,30); paper.ellipse(70,70,60,30); paper.path('M70,40 A60,30 0 0,0 130,70').attr('stroke','yellow'); paper.text(40,30,'start(70,40)') .attr({ 'font-size':11, 'fill':'blue' }); paper.text(160,80,'end(130,70)') .attr({ 'font-size':11, 'fill':'blue' }); paper.text(70,120,'large-arc-flag=0/nsweep-flag=0') .attr({ 'font-size': 11, 'fill': 'green', 'text-anchor': 'start' }); //繪制右上的橢圓 paper.ellipse(330,40,60,30); paper.ellipse(270,70,60,30); paper.path('M270,40 A60,30 0 0,1 330,70').attr('stroke','yellow'); paper.text(240,30,'start(270,40)') .attr({ 'font-size':11, 'fill':'blue' }); paper.text(360,80,'end(330,70)') .attr({ 'font-size':11, 'fill':'blue' }); paper.text(270,120,'large-arc-flag=0/nsweep-flag=1') .attr({ 'font-size': 11, 'fill': 'green', 'text-anchor': 'start' }); //繪制左下的橢圓 paper.ellipse(130,240,60,30); paper.ellipse(70,270,60,30); paper.path('M70,240 A60,30 0 1,0 130,270').attr('stroke','yellow'); paper.text(40,230,'start(70,240)') .attr({ 'font-size':11, 'fill':'blue' }); paper.text(160,280,'end(130,270)') .attr({ 'font-size':11, 'fill':'blue' }); paper.text(70,320,'large-arc-flag=1/nsweep-flag=0') .attr({ 'font-size': 11, 'fill': 'green', 'text-anchor': 'start' }); //繪制右下的橢圓 paper.ellipse(330,240,60,30); paper.ellipse(270,270,60,30); paper.path('M270,240 A60,30 0 1,1 330,270').attr('stroke','yellow'); paper.text(240,230,'start(270,240)') .attr({ 'font-size':11, 'fill':'blue' }); paper.text(360,280,'end(330,270)') .attr({ 'font-size':11, 'fill':'blue' }); paper.text(270,320,'large-arc-flag=1/nsweep-flag=1') .attr({ 'font-size': 11, 'fill': 'green', 'text-anchor': 'start' }); </script> </body></html>其中有個paper.text方法正好我們解析來要講解的內容，這里也算提前預覽一下。
A(a)elliptical arc(rx ry x-axis-rotation large-arc-flag sweep-flag x y)?；
參數含義：
rx：橫軸的長度；
ry：縱軸的長度；
x-axis-rotation：橢圓的橫軸與x軸的角度；
large-arc-flag：區分弧度的大小（0表示小角度弧度，1表示大角度弧度）；
sweep-flag：繪制弧度圍繞橢圓中心的方向（0表示逆時針方向，1表示順時針方向）；
x y：橢圓曲線終點坐標；
效果圖如下：
?
?圖畫上面有個A命令的參數含義，其實加上這位博主的參數含義的解釋還是很好理解的。注意圖中的黃色曲線，每個下面有2個參數的解釋，忽略4組圖形的開始和結束坐標，其實他們的區別就是在larget-arc-flag和sweep-flag的參數設置不同。
large-arc-flag：區分弧度的大小（0表示小角度弧度，1表示大角度弧度）；
sweep-flag：繪制弧度圍繞橢圓中心的方向（0表示逆時針方向，1表示順時針方向）；
是不是一目了然？larget-arc-flag就是畫小弧還是大弧的區別、sweep-flag是逆時針還是順時針。
?“Catmull-Rom 曲線”不是SVG標準命令，這里不再贅述，有興趣的可以自己去研究測試一下。
? ? 接下來我們講解的方法是text方法。上例中出現了paper.text()，是用來顯示文字內容的方法。語法其實很簡單，就是x,y坐標和文字內容。
paper.text(X,Y,"Raphael JS Text");
var text = paper.text(40,55,"Raphael Text").attr({
"fill":"#17A9C6", // font-color
"font-size":75, // font size in pixels
"text-anchor":"start",
"font-family":"century gothic" // font family of the text
});
//text-anchor屬性表明文字與坐標的關系，是從這個坐標開始、為中心還是為結尾。屬性值可以設置 "start", "middle" or "end" 默認"middle"。
? ? ? 到此位置，我們已經講解了創建畫布、創建基本圖形、創建復雜圖形、text文本內容等方法。到現在位置其實我們都是在做靜態圖畫的編輯，我們如果想要操作和添加事件,需要學習接下來的知識。接下來的內容將在下一篇博文中講述。
總結
以上是生活随笔為你收集整理的快速上手RaphaelJS--RaphaelJS_Starter翻译（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： javascript修改CSS
- 下一篇： 快速上手RaphaelJS--Rapha