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 使用指南
原文地址：https://www.cnblogs.com/hss-blog/p/9802185.html