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()
常用命令及解释
相关推荐
《raphaeljs_starter》是一本专注于RaphaelJS这一强大跨浏览器兼容的矢量图形库的教程书籍，由A. Krishnasagar编写，旨在帮助读者掌握如何轻松地创建交互式的2D图形和动画。本书由Packt Publishing出版，首次出版于...
[奥莱理] RaphaelJS 编程 (英文版) [奥莱理] RaphaelJS Graphics and Visualization on the Web (E-Book) ☆ 图书概要：☆ Create beautiful, interactive images on the Web with RaphaelJS, the JavaScript ...
“Raphaeljs 插件实现任意SVG节点加载”这一标题指出我们将讨论一个基于Raphaeljs的插件，它的功能是允许用户动态加载SVG（可缩放矢量图形）节点。Raphaeljs是一个JavaScript库，专门用于在Web浏览器中创建和操作SVG...
Raphael JS是一个强大的JavaScript库，专门用于在Web浏览器中创建矢量图形。它允许开发者创建出复杂的、可缩放的图形，这些图形在任何分辨率下都能保持清晰，从而提供了优质的用户体验。"Learning Raphael JS Vector...
《Learning Raphael JS Vector Graphics》是一本专注于Raphael.js库的图书，它涵盖了使用JavaScript和SVG（可缩放矢量图形）技术创建动态、交互式的Web图形的全面知识。SVG是一种基于XML的图形标准，允许在网页上...
RaphaelJS是一款强大的JavaScript库，专门用于在SVG（Scalable Vector Graphics）和VML（Vector Markup Language）格式下创建矢量图形。这个插件允许开发者在网页上绘制出复杂、交互式的图形，而且这些图形在任何...
在前端开发领域，RaphaelJS是一个强大的JavaScript库，专门用于创建矢量图形。它使得开发者能够在网页上绘制出复杂的图形，且这些图形在任何分辨率和屏幕尺寸下都能保持清晰。本篇文章将深入探讨如何利用RaphaelJS...
Raphaël.js 是一个流行的JavaScript库，专用于在Web浏览器中创建矢量图形。这个压缩包包含了关于Raphaël.js的所有文档、网站内容以及可能的书籍资源，是学习和深入理解Raphaël.js的理想资料集合。下面将详细阐述...
难得一见的raphaeljs chm手册 绝对超值！
这个"raphaeljs源码库0分分享"包含的`raphael-master`压缩包可能包含了Raphaël.js的完整源代码，对于学习和理解这个库的工作原理非常有价值。源码库通常会包含以下组成部分： 1. **源代码文件**：`raphael.js`和`...
barChart-raphaelJS 使用 RaphaelJS 的简单条形图库 创建简单的条形图 比较视图 横向或纵向模式 悬停值的工具提示 多色支持 横向/纵向模式 配置简单 支持 IE 6+ 安装 git clone ...
RaphaelJS.group 将 SVG 组元素带入 Raphael JS 框架的插件。 简短的文档 首先看一下在页面中添加脚本的'index.html'文件的源代码。 发起群组： var group = new r.group('container',array); 其中：'r' 是 ...
**Raphael JS矢量图形库** Raphael是一个强大的JavaScript库，专为在Web浏览器中创建矢量图形而设计。它支持SVG（Scalable Vector Graphics）和VML（Vector Markup Language），确保在各种浏览器中都能得到良好的...
本文将深入探讨"Raphaeljs的一个bug（内存泄露)"这个主题，结合标签“源码”和“工具”，我们将会分析Raphael.js库中的潜在问题以及如何定位和解决内存泄露。 Raphael.js是一款广泛使用的JavaScript库，它允许...
RaphaëlJS API 是一个JavaScript库，专用于在Web浏览器中创建矢量图形。它基于SVG（Scalable Vector Graphics）和VML（Vector Markup Language）标准，这两种标准允许在网页上绘制清晰、可缩放的图形，无论放大多少...
压缩包中的`raphael.js`是RaphaëlJS的完整版本，包含了所有功能和调试信息，适合在开发阶段使用。而`raphael-min.js`则是经过压缩和优化后的版本，体积更小，加载速度更快，适用于生产环境。 在实际应用中，Rapha...
Raphaël.js 是一个强大的JavaScript库，专用于在Web浏览器中创建矢量图形。它基于SVG（可缩放矢量图形）和VML（矢量标记语言），这两种技术允许在网页上绘制清晰且分辨率独立的图形。Raphaël.js 的主要优势在于它...
本资源只是个简单的教程，如有疑问欢迎留言探讨
用适量图形 绘制流程，实现简单明了的流程，方便业务操作和查看 以后会做成专业的 组件，纯js的