什么是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. Oracle EBS-SQL (SYS-8):职责定义明细.sql

    SELECT DISTINCT fa.application_short_name 模块,                 b.responsibility_name 职责名称, fa.applica ...

  2. Office 2010简体中文正式版完美终身破解版免费下载

    名称:Microsoft Office Professional 2010 正式版(JK破解免序列号安装版) Microsoft Office 2010 专业版 优点:用官方Microsoft off ...

  3. startup_LPC17XX.s 启动文件分析

    工程中startup_LPC17XX.s是M3的启动文件,启动文件由汇编语言写的,它的作用一般是下面这几个: 1)堆和栈的初始化 2)中断向量表定义 3)地址重映射及中断向量表的转移 4)设置系统时钟 ...

  4. centos6.5vpn搭建

    centos6.5vpn搭建整个搭建流程,服务端,客户端安装及测试. 达到的效果: 在安装vpn客户端的机器可通过vpn(virtual private network)专用线路(vpn主配置文件中定 ...

  5. Android NDK 编译FFmpeg(不需要复杂的环境变量设置)

    环境: CentOS6.2——64位 借鉴:https://vec.io/posts/how-to-build-ffmpeg-with-android-ndk 在根目录下创建work文件夹:cd  / ...

  6. 【OpenCV新手教程之十二】OpenCV边缘检測：Canny算子,Sobel算子,Laplace算子,Scharr滤波器合辑

    本系列文章由@浅墨_毛星云 出品,转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/25560901 作者:毛星云(浅墨) ...

  7. delphi “Invalid floating point operation.”错误的解决方法

    这两天用webbrower写东西,有时候打开SSL加密站点时会出现”Invalid floating point operation.”的错误,上网搜了下,把解决方法贴上. 导致原因 在Delphi2 ...

  8. Android文件存储使用参考

    可能遇到的问题 android系统自身自带有存储,另外也可以通过sd卡来扩充存储空间.前者好比pc中的硬盘,后者好移动硬盘. 前者空间较小,后者空间大,但后者不一定可用. 开发应用,处理本地数据存取时 ...

  9. 揭密: M2和高房价到底谁推高了谁?

    近期,著名经济学家吴敬链向新华网等媒体表示:房价高的根本原本就是货币超发.近期十年来我国M2增长率(广义货币增长率)太快."钱太多了,有些人要保值就要投资买房,又因货币非常多购买力非常强.就 ...

  10. Deep Learning（深度学习）学习笔记整理系列之（三）

    Deep Learning(深度学习)学习笔记整理系列 zouxy09@qq.com http://blog.csdn.net/zouxy09 作者:Zouxy version 1.0 2013-04 ...