什么是Raphael
raphael.js是一小巧的javascript庫，它可以在web上畫矢量圖簡化你的工作，如果你想創建你指定的圖表，圖形區域或者可移動的組件，那么就使用raphael吧
話不多說，開始我們的學習吧！！！！！！！
一個小栗子
1 <html> 2 <head></head> 3 <script type="text/javascript" src="raphael-min.js"></script> 4 <body> 5 <div id="raphael"></div> 6 <script type="text/javascript"> 7 var paper = Raphael(10, 50, 320, 200); 8 var circle = paper.circle(50, 40, 10); 9 circle.attr("fill", "#f00"); 10 circle.attr("stroke", "#fff"); 11 </script> 12 </body> 13 </html>
這是官網的一個demo,第七行Raphael是構造函數（具體構造參數將在后面章節介紹）,它返回一個paper對象，第8行通過paper對象實例調用方法畫圈圈，而第9，10行給圈圈增加參數，哈哈，效果粗來了吧
Raphael就是我們遇到的第一個對象，也是raphael.js最大的一個對象，它有幾種構造方式，全部返回paper對象（具體構造方式請查閱API文檔）
返回的paper對象實例我們就可以通過它來畫圓（circle）、橢圓(eclipse)、圖片(image)、方形(rect)、文本(text)、矢量圖（path）
生成完圖形之后就是給圖形元素增加各種屬性（attr）
所以總結下來raphael的開發步驟
- 通過Raphael獲得畫布（paper）
- 通過畫布（paper）畫圖
- 為你的圖增加動畫以及各項屬性
實例練習
<html> <head></head> <script type="text/javascript" src="raphael-min.js"></script> <body> <div id="raphael"></div> <script type="text/javascript"> var paper = Raphael("raphael", 1000, 1000); //畫圓 var circle = paper.circle(100, 100, 10); circle.attr("fill", "#f00"); circle.attr("stroke", "#fff"); //畫橢圓 var ellipse = paper.ellipse(200, 100, 40, 20); ellipse.attr("fill", "#ccc"); ellipse.attr("stroke", "#000"); //貼圖 圖片請自帶 var image = paper.image("apple.jpg", 300, 100, 80, 80); //畫路徑 從10.10 移動到90.90 var path = paper.path("M400 100L500 300"); // 正常的方形 var rect1 = paper.rect(500, 100, 50, 50); // 帶10弧度的方形 var rect2 = paper.rect(600, 100, 50, 50, 10); </script> </body> </html>
總結
本章介紹了raphael的基本用法，下一章節將介紹raphael的屬性！！！敬請期待
文筆不好歡迎拍磚