什么是Raphael

raphael.js是一小巧的javascript库，它可以在web上画矢量图简化你的工作，如果你想创建你指定的图表，图形区域或者可移动的组件，那么就使用raphael吧

话不多说，开始我们的学习吧！！！！！！！

一个小栗子

 <html>

     <head></head>

     <script type="text/javascript" src="raphael-min.js"></script>

     <body>

         <div id="raphael"></div>

         <script type="text/javascript">

             var paper = Raphael(10, 50, 320, 200);

             var circle = paper.circle(50, 40, 10);

             circle.attr("fill", "#f00");

             circle.attr("stroke", "#fff");

         </script>

     </body>

 </html>

这是官网的一个demo,第七行Raphael是构造函数（具体构造参数将在后面章节介绍）,它返回一个paper对象，第8行通过paper对象实例调用方法画圈圈，而第9，10行给圈圈增加参数，哈哈，效果粗来了吧

Raphael就是我们遇到的第一个对象，也是raphael.js最大的一个对象，它有几种构造方式，全部返回paper对象（具体构造方式请查阅API文档）

返回的paper对象实例我们就可以通过它来画圆（circle）、椭圆(eclipse)、图片(image)、方形(rect)、文本(text)、矢量图（path）

生成完图形之后就是给图形元素增加各种属性（attr）

所以总结下来raphael的开发步骤

  1. 通过Raphael获得画布（paper）
  2. 通过画布（paper）画图
  3. 为你的图增加动画以及各项属性

实例练习

<html>

    <head></head>

    <script type="text/javascript" src="raphael-min.js"></script>

    <body>

        <div id="raphael"></div>

        <script type="text/javascript">

            var paper = Raphael("raphael", 1000, 1000);

            //画圆

            var circle = paper.circle(100, 100, 10);

            circle.attr("fill", "#f00");

            circle.attr("stroke", "#fff");

            //画椭圆

            var ellipse = paper.ellipse(200, 100, 40, 20);

            ellipse.attr("fill", "#ccc");

            ellipse.attr("stroke", "#000");

            //贴图 图片请自带

            var image = paper.image("apple.jpg", 300, 100, 80, 80);

            //画路径 从10.10 移动到90.90

            var path = paper.path("M400 100L500 300");

            // 正常的方形

            var rect1 = paper.rect(500, 100, 50, 50);

            // 带10弧度的方形

            var rect2 = paper.rect(600, 100, 50, 50, 10);

        </script>

    </body>

</html>

总结

本章介绍了raphael的基本用法，下一章节将介绍raphael的属性！！！敬请期待

文笔不好欢迎拍砖

raphael入门到精通---入门篇之总览的更多相关文章

  1. Java入门到精通——基础篇之多线程实现简单的PV操作的进程同步

    Java入门到精通——基础篇之多线程实现简单的PV操作的进程同步 一.概述     PV操作是对信号量进行的操作.     进程同步是指在并发进程之间存在一种制约关系,一个进程的执行依赖另一个进程的消 ...

  2. SaltStack 入门到精通第二篇：Salt-master配置文件详解

    SaltStack 入门到精通第二篇:Salt-master配置文件详解     转自(coocla):http://blog.coocla.org/301.html 原本想要重新翻译salt-mas ...

  3. SaltStack入门到精通第一篇：安装SaltStack

    SaltStack入门到精通第一篇:安装SaltStack 作者:纳米龙  发布日期:2014-06-09 17:50:36   实际环境的设定: 系统环境: centos6 或centos5 实验机 ...

  4. Promise入门到精通(初级篇)-附代码详细讲解

    Promise入门到精通(初级篇)-附代码详细讲解 ​     Promise,中文翻译为承诺,约定,契约,从字面意思来看,这应该是类似某种协议,规定了什么事件发生的条件和触发方法. ​     Pr ...

  5. HR问了一句DB是啥？SQL是啥？DB是Database数据库，SQL是数据库语言! 然后呢？ 数据库从入门到精通--入门必看！

    写在前面 本文的写作知识体系来源于我的数据库老师SDAU张承明,部分知识来自于网络,我呢对知识进行了细化和添加了自己的一些看法,并且加入了一些实例帮助理解,本文不是面向SQL高手写的,可以看作是数据库 ...

  6. Jmeter(三十四) - 从入门到精通进阶篇 - 参数化（详解教程）

    1.简介 前边三十多篇文章主要介绍的是Jmeter的一些操作和基础知识,算是一些初级入门的知识点,从这一篇开始我们就来学习Jmeter比较高级的操作和深入的知识点了.今天这一篇主要是讲参数化,其实前边 ...

  7. Java从入门到精通——数据库篇Mongo DB 导出,导入,备份

    一.概述    本篇博客为大家讲述一下Mongo DB是如何导入导出数据,还有就是备份数据的.    在下面操作的时候需要把Mongo DB的服务端打开才能操作. 二.导出.    MongoDB的导 ...

  8. Java从入门到精通——数据库篇Mongo DB 安装启动及配置详解

    一.概述     Mongo DB 下载下来以后我们应该如何去安装启动和配置才能使用Mongo DB,本篇博客就给大家讲述一下Mongo DB的安装启动及配置详解. 二.安装 1.下载Mongo DB ...

  9. Java入门到精通——框架篇之Spring源码分析Spring两大核心类

    一.Spring核心类概述. Spring里面有两个最核心的类这是Spring实现最重要的部分. 1.DefaultListableBeanFactory 这个类位于Beans项目下的org.spri ...

随机推荐

  1. MVC 4 结合jquery.uploadify 上传实例

    前言:由于今天公司源代码服务瘫痪,没法编写代码,利用这个有限的时间,做了一个小小的 基于MVC的图片上传demo,貌似近些年来MVC十分火爆,相关的demo也数不胜数,小弟就在这里打着MVC的旗子,狐 ...

  2. System.DateTime的一些格式

    //2008年4月24日     System.DateTime.Now.ToString("D"); //2008-4-24     System.DateTime.Now.To ...

  3. CSS转载备忘

    原文地址:http://www.cnblogs.com/coffeedeveloper/p/3145790.html#html 转载内容: 对CSS中的Position.Float属性的一些深入探讨 ...

  4. delphi 7中使用idhttp抓取网页 解决假死现象

    在delphi 7中使用idhttp抓取网页,造成窗口无反应的假死状态.通过搜索获得两种方法. 1.写在线程中,但是调用比较麻烦 2.使用delphi 提供的idantifreeze(必须安装indy ...

  5. Puppet的执行过程

    图1 Puppet工作流程 1. 客户端Puppetd向Master发起认证请求,或使用带签名的证书. 2. Master告诉Client你是合法的. 3. 客户端Puppetd调用Facter,Fa ...

  6. linux中读写锁的rwlock介绍-nk_ysg-ChinaUnix博客

    linux中读写锁的rwlock介绍-nk_ysg-ChinaUnix博客 linux中读写锁的rwlock介绍 2013-02-26 13:59:35 分类: C/C++   http://yaro ...

  7. UberX及以上级别车奖励政策(优步北京第一组)

    优步北京第一组: 定义为2015年6月1日凌晨前(不含6月1日)激活的司机(以优步后台数据显示为准) 滴滴快车单单2.5倍,注册地址:http://www.udache.com/如何注册Uber司机( ...

  8. 前端开发工具—fiddle

  9. NYOJ 7-街区最短路径问题(曼哈顿距离)

    街区最短路径问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 一个街区有很多住户,街区的街道只能为东西.南北两种方向. 住户只可以沿着街道行走. 各个街道之间的间 ...

  10. 经常使用的DB2命令（2）

    catalog数据库: catalog indirect: db2 catalog database on /db2sys[dir_name] catalog remote:    db2 catal ...