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 使用指南的更多相关文章

  1. 【vue.js权威指南】读书笔记（第一章）

    最近在读新书<vue.js权威指南>,一边读,一边把笔记整理下来,方便自己以后温故知新,也希望能把自己的读书心得分享给大家. [第1章:遇见vue.js] vue.js是什么? vue.j ...

  2. 学习RaphaelJS矢量图形包--Learning Raphael JS Vector Graphics中文翻译（一）

    (原文地址:http://www.cnblogs.com/idealer3d/p/LearningRaphaelJSVectorGraphics.html) 前面3篇博文里面,我们讲解了一本叫做< ...

  3. 强大的矢量图形库：Raphael JS 中文帮助文档及教程

    Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库.它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出 ...

  4. Node.js开发指南中的例子（mysql版）

    工作原因需要用到nodejs,于是找到了<node.js开发指南>这本书来看看,作者BYVoid 为清华大学计算机系的高材生,年纪竟比我还小一两岁,中华地广物博真是人才辈出,佩服. 言归正 ...

  5. Raphael Js矢量库API简介：

    Raphael Js矢量库API简介:Raphael Javascript 是一个 Javascript的矢量库. 2010年6月15日,著名的JavaScript库ExtJS与触摸屏代码库项目jQT ...

  6. PHP+Mysql+jQuery实现中国地图区域数据统计(raphael.js)

    使用过百度统计或者cnzz统计的童鞋应该知道,后台有一个地图统计,不同访问量的省份显示的颜色也不一样,今天我将带领大家开发一个这样的案例.上一篇<使用raphael.js绘制中国地图>文章 ...

  7. Javascript实战开发：教你使用raphael.js绘制中国地图

    最近的数据统计项目中要用到中国地图,也就是在地图上动态的显示某个时间段某个省份地区的统计数据,我们不需要flash,仅仅依靠raphael.js以及SVG图像就可以完成地图的交互操作.在本文中,我给大 ...

  8. 《JS权威指南学习总结》

    JS权威指南学习总结:http://www.cnblogs.com/ahthw/category/652668.html

  9. 《JS权威指南学习总结--开始简介》

    本书共分成了四大部分: 1.JS语言核心 2.客户端JS 3.JS核心参考 4.客户端JS核心参考 其中 <JS权威指南学习总结--1.1语法核心> 是:第一部分JS语言核心 各章节重点 ...

随机推荐

  1. Nginx之负载均衡配置（二）

    前文我们聊到了nginx作为负载均衡的配置,前端nginx作为调度器调度http或https请求,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/12458159 ...

  2. 脚本写一行echo也能写出bug ? glob了解一下

    背景 最近处理一个 bug 很有意思,有客户反馈某个配置文件解析失败了,出错的那行的内容就只有一个字母 a. 最开始以为是谁改动了处理的脚本,但要到了问题代码中的脚本,比较发现跟库上是一样的. 又经过 ...

  3. 手机app抓包工具,安卓手机adb无线连接

    默认手机已经usb调试配置完成 网络必须在同一网络中,每次断开wifi连接,都必须重新重做一次 使用数据线连接电脑 cmd 打开一个命令行 输入 # abd如果没有配置环境变量,请配置或者进入adb文 ...

  4. Unsafe中CAS的实现

    前言 Unsafe 是位于 sun.misc 包下的一个类.Unsafe 提供的 API 大致可分为内存操作.CAS.Class 相关.对象操作.线程调度.系统信息获取.内存屏障.数组操作等几类.由于 ...

  5. [BUG]excel复制到input含有不可见内容(零宽字符)

    现象 excel手机号复制到input框子, length长度和可见长度不一致. "‭176xxxx1115‬" 长度是 13 而不是 11. 原因 手机号前后被 excel 插入 ...

  6. 在Servlet端获取html页面选中的checkbox值，request获取页面checkbox（复选框）值

    html端代码: 选项框: <input type="checkbox" name="crowd" value="选项一">选项 ...

  7. Error: java.net.ConnectException: Call From tuge1/192.168.40.100 to tuge2:8032 failed on connection exception

    先看解决方案,再看唠嗑,唠嗑可以忽略. 解决方案: 使用start yarn.sh启动yarn就可以了. 唠嗑: 今天学习Spark基于Yarn部署.然后总以为Yarn是让Spark启动的,提交程序的 ...

  8. java基础-对集合（Collection）的总结

    集合(Collection)类型也是Java标准库中被使用最多的类型. List ArrayList LinkedList 对于自定义的对象,需要正确覆写 equals方法 参看7.3 例子 Map ...

  9. Java分布式IP限流和防止恶意IP攻击方案

    前言 限流是分布式系统设计中经常提到的概念,在某些要求不严格的场景下,使用Guava RateLimiter就可以满足.但是Guava RateLimiter只能应用于单进程,多进程间协同控制便无能为 ...

  10. 工作流--Activiti

    一.工作流 1.工作流介绍 工作流(Workflow),就是通过计算机对业务流程自动化执行管理.它主要解决的是“使在多个参与者  之间按照某种预定义的规则自动进行传递文档.信息或任务的过程,从而实现某 ...