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. 【Vue】---- 手动封装on，emit，off

    一.概念 1. $on("事件名称",回调函数) 事件绑定,一个事件名称上面可能绑定多个函数 2. $emit("事件名称",需要传递的值) 事件触发时,会触发 ...

  2. Thread同步

    今天本人给大家讲解一下多线程的线程同步,如有不对的或者讲的不好的可以多多提出,我会进行相应的更改,先提前感谢提出意见的各位了!!! 开始说线程同步前先来个小案例: 案例启:所有的类都在Demo01中, ...

  3. java之线程中断——interrupt

    如下图所示,interrupt()方法并没有成功的中断我们的线程. 为了便于理解,其实可以这样来类比(注意,只是类比,实际情况并不完全是这样):Thread类中有一个boolean的标志域用来表示线程 ...

  4. plantUML最佳实践

    plantUML 使用plantUML中的活动图用来画流程图很好用; 但类图等就不很好用; 个人体会如下: • 时序图 推荐 • 用例图 一般 • 类 图 不推荐, 用Visual Paradigm或 ...

  5. Python只有文件不存在才能写文件

    当我们在Python里面写文件时,我们常用的模式为 w模式,这种模式下,如果文件不存在,就会生成文件:如果文件已经存在,就会直接覆盖. 有时候,如果文件已经存在,直接覆盖文件可能会导致重要数据丢失.你 ...

  6. SQLserver用Image格式储存图片

    前言 最近项目更新一个新需求,要求把图片储存在SQLserver中,而不是储存在本地磁盘.很好,又有新东西可以学了. 正文 一.建表 这里大概建几个字段演示一下 CREATE TABLE [dbo]. ...

  7. 《JavaScript 模式》读书笔记（2）— 基本技巧2

    前一篇,简单介绍了一些js代码的基本技巧.那么这篇文章,我们继续后续的内容. 一.for循环 for循环经常用在遍历数组或者类数组对象,如引数(arguments)和HTML容器(HTMLCollti ...

  8. 曹工说Spring Boot源码（24）-- Spring注解扫描的瑞士军刀，asm技术实战（上）

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...

  9. 理解Golang组件protobuf

    什么是protobuf protocol buffers 是一种语言无关.平台无关.可扩展的序列化结构数据的方法,它可用于(数据)通信协议.数据存储等.是一种灵活,高效,自动化机制的结构数据序列化方法 ...

  10. SVN分支合并指南

    SVN分支合并主干具体操作步骤 1. 在装有svn插件的myeclipse中,在主干上选择需要合并的文件或文件夹, 右击--> team -->合并(merge) 2.选择合并类型--合并 ...