什么是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. LINUX常用命令--重定向、管道篇（四）

    一.Linux重定向 重定向能够实现Linux命令的输入输出与文件之间重定向,以及实现将多个命令组合起来实现更加强大的命令.这部分涉及到的比较多的命令主要有: 涉及到的比较多的命令主要有: cat:连 ...

  2. SQL Server 触发器的修改与删除

    修改: alter trigger trigger_name on ..... as .....   #把create 修成  alter 就可以了. 删除: drop trigger trigger ...

  3. 关于Apple Pay，一篇让你不看就会后悔的文章

    编者按:本文作者康上明学为“小米生活”产品经理,在苹果Apple Pay发布后,他对该产品做了深入研究,带来这篇文章. 对于 Apple Pay ,我有几个疑问: 线下支付是一个庞大复杂的流程,当中涉 ...

  4. iOS 视图跳转

    //跳转 - ( void)present:( id )sender { NSLog ( @"the button,is clicked …" ); // 创建准备跳转的 UIVi ...

  5. yum subversion puppet puppet-server

    yum -y install ruby ruby-libs ruby-shadow yum -y install puppet puppet-server facter yum -y install ...

  6. js 事件之 createEvent、dispatchEvent

    //document上绑定自定义事件ondataavailable document.addEventListener('customevent', function(event) { alert(e ...

  7. SQL Server索引进阶第十一篇：索引碎片分析与解决

    相关有关索引碎片的问题,大家应该是听过不少,也许也很多的朋友已经做了与之相关的工作.那我们今天就来看看这个问题. 为了更好的说明这个问题,我们首先来普及一些背景知识. 知识普及 我们都知道,数据库中的 ...

  8. CSS样式表初始化代码

    CSS为什么要初始化?建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化样式会对SEO有一定的影 ...

  9. socketio 握手前中断报错

    前两天折腾了下socketio,部署完发现通过nginx代理之后前端的socket无法和后端通信了,于是暴查一通,最后解决问题: location / { proxy_pass http://127. ...

  10. [vc]如何对radio按钮分组

    如何使用多组? 多组和一组是一样的使用,只要搞清楚哪个是哪一组的就行了.再为对话框添加Radio3和Radio4.很简单,先为这些RadioButton排个顺序,就是排列他们的TABORDER.在对话 ...