什么是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. c++中多态性、dynamic_cast、父类指针、父类对象、子类指针、子类对象

    c++多态性是依靠虚函数和父类指针指向子类对象来实现的.简单来说,父类中定义虚函数,父类指针指向子类对象,父类指针调用函数时调用的就是子类的函数. 父类没有定义虚函数,父类指针指向子类对象时,父类指针 ...

  2. WEB Application Development Integrator ： 应用设置

    1.1.       系统安装 应用 Oracle EBS WEB Application Development Integrator WEB ADI在Oracle EBS 11.5.10.* 版本 ...

  3. 运用JavaScript构建你的第一个Metro式应用程序（on Windows 8）（一）

    原文 http://blog.csdn.net/zhangxin09/article/details/6784547 作者:Chris Sells 译: sp42   原文 包括 HTML.CSS 和 ...

  4. ViewPager + HorizontalScrollView 实现可滚动的标签栏

    这是一个可滑动的标签栏的自定义控件,参考此文章http://blog.csdn.net/fx_sky/article/details/8990573,我将主要的功能整合成一个类,配上2个特定的布局即可 ...

  5. java 一致性哈希类实例 算法

    package com.hash; import java.util.Collection; import java.util.SortedMap; import java.util.TreeMap; ...

  6. git多人协作

    多人协作 当你从远程仓库克隆时,实际上Git自动把本地的master分支和远程的master分支对应起来了,并且,远程仓库的默认名称是origin. 要查看远程库的信息,用git remote: $ ...

  7. Unix/Linux环境C编程入门教程(9) unbntu CCPP开发环境搭建

    1.      首先启动VMware,如果没有安装,请查看前面VMware的安装视频 2 启动虚拟机向导,选择自定义 3 单击下一步 4 选择稍后安装操作系统 5 .选择unbntu 64linux ...

  8. MySQL 5.7.10 免安装配置

    # 配置环境:windows 64bit # 安装版本:mysql-5.7.10-win32(zip archive版本) 1. ZIP Archive版是免安装的,只需把mysql-5.7.10-w ...

  9. MySql数据库连接池

    1.传统链接(如下为示意图) 注意: (1).传统方式找DriverManager要连接,数目是有限的. (2).传统方式的close(),并没有将Connection重用,只是切断应用程序和数据库的 ...

  10. 如何在VMware虚拟机上安装Linux操作系统（Ubuntu）

    作为初学者想变为计算机大牛非一朝一夕,但掌握基本的计算机操作和常识却也不是多么难的事情.所以作为一名工科男,为了把握住接近女神的机会,也为了避免当白痴,学会装系统吧!of course为避免把自己的电 ...