raphael.js 使用指南
阿新 • • 發佈：2018-10-17
== demo 路徑 edr () 處理文本 htm ava scrip
RaphaelJS是一個用JavaScript實現的強大的矢量圖形庫。
（1）使用前準備，下載RaphaelJS，到官網下載。
（2）在相應的HTML頁面引入RaphaelJS，如下示例代碼：
<!DOCTYPE html>
<html>
<head>
<title>RaphaelJS Demo</title>
</head>
<body>
<div id="paperDiv" style="width: 140px; padding:0px; margin:0px"></div>
<script src="raphael-min.js"></script>
</body>
</html>（3）在通過元素創建一個對象
var elm = document.getElementById("paperDiv"); var paper = Raphael(elm, 560, 400);
或者，直接將元素的id傳到Raphael中，如：
var paper = Raphael("paperDiv", 650, 400);
（4）畫圓circle()
//var cir = paper.circle(x, y, r); //x和y為坐標，r為圓的半徑 var cir = paper.circle(35, 25, 20);
（5）為形狀設置屬性attr()
/* 語法如下： element.attr({ "property1": value1, "property2": value2 })*/
如畫一個有填充顏色的圓：
var coloredCircle = paper.circle(35, 25, 20).attr({ "fill": "#17A9C6", "stroke": "#2A6570", "stroke-width": 2 });
（6）畫矩形rect()
//語法： //paper.rect(x, y, width, height, border-radius[optional]); //常規矩形 var rect = paper.rect(20, 20, 170, 100); //圓角矩形 var roundedRect = paper.rect(20, 20, 170, 100, 20);
（7）畫橢圓形ellipse()
//語法： //paper.ellipse(x, y, rx, ry); var ellipse = paper.ellipse(195, 125, 170, 100);
（8）畫路徑path()
var tri = paper.path("M0,0L26,0L13,18L0.0");
常用命令及解釋
（9）處理文本text()
//語法： //paper.text(x, y, "text");
（10）處理變形transform()
常用命令及解釋
raphael.js 使用指南