raphael.js 使用指南
生活随笔
收集整理的這篇文章主要介紹了
raphael.js 使用指南
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
RaphaelJS是一個(gè)用JavaScript實(shí)現(xiàn)的強(qiáng)大的矢量圖形庫(kù)。
（1）使用前準(zhǔn)備，下載RaphaelJS，到官網(wǎng)下載。
（2）在相應(yīng)的HTML頁(yè)面引入RaphaelJS，如下示例代碼：
<!DOCTYPE html>
<html>
<head>
<title>RaphaelJS Demo</title>
</head>
<body>
<div id="paperDiv"></div>
<script src="raphael-min.js"></script>
</body>
</html>
（3）在通過(guò)元素創(chuàng)建一個(gè)對(duì)象
var elm = document.getElementById("paperDiv");
var paper = Raphael(elm, 560, 400);
或者，直接將元素的id傳到Raphael中，如：
var paper = Raphael("paperDiv", 650, 400);
（4）畫(huà)圓circle()
//var cir = paper.circle(x, y, r); //x和y為坐標(biāo)，r為圓的半徑 var cir = paper.circle(35, 25, 20);
（5）為形狀設(shè)置屬性attr()
/*
語(yǔ)法如下：
element.attr({
"property1": value1,
"property2": value2
})
*/
如畫(huà)一個(gè)有填充顏色的圓：
var coloredCircle = paper.circle(35, 25, 20).attr({
"fill": "#17A9C6",
"stroke": "#2A6570",
"stroke-width": 2
});
（6）畫(huà)矩形rect()
//語(yǔ)法： //paper.rect(x, y, width, height, border-radius[optional]); //常規(guī)矩形 var rect = paper.rect(20, 20, 170, 100); //圓角矩形 var roundedRect = paper.rect(20, 20, 170, 100, 20);
（7）畫(huà)橢圓形ellipse()
//語(yǔ)法： //paper.ellipse(x, y, rx, ry); var ellipse = paper.ellipse(195, 125, 170, 100);
（8）畫(huà)路徑path()
var tri = paper.path("M0,0L26,0L13,18L0.0");
常用命令及解釋
（9）處理文本text()
//語(yǔ)法： //paper.text(x, y, "text");
（10）處理變形transform()
常用命令及解釋
總結(jié)
以上是生活随笔為你收集整理的raphael.js 使用指南的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： cad如何批量打印pdf？cad批量打印
- 下一篇： cad注册表怎么删除？CAD安装报错14