Raphael.js

特点：

　　1.兼容VML和SVG
　　2.扩展功能——动画

用法：

　　//1.创建画布
　　let paper=Raphael(x,y,width,height);

　　//2.创建形状
　　let rect=paper.rect(x,y,width,height);

　　//3.设置属性(样式)
　　rect.attr({fill: 'red', stroke: 'green'});

　　//4.事件
　　rect.click(fn);
　　rect.unclick(fn);

参数说明：https://www.cnblogs.com/cxmSuperman/p/10582248.html

例子：

  1.  <script>　　　　　　//基础用法
  2.  window.onload=function (){
  3.  let paper=Raphael(0,0,800,600);
  4.  
  5.  //图形
  6.  let rect=paper.rect(100,100,400,300);
  7.  
  8.  //属性&样式
  9.  rect.attr('fill', '#CCC');
  10.  
  11.  //事件
  12.  rect.click(function (){
  13.  //this.attr('fill', 'red');
  14.  //alert(this.attr('fill'));
  15.  
  16.  this.attr({fill: 'red', width: '200', height: '150'});
  17.  });
  18.  };
  19.  </script>
  1.  <script>    //圆角矩形
  2.      window.onload=function (){
  3.        let paper=Raphael(0,0,800,600);
  4.  
  5.        //图形
  6.        let rect=paper.rect(100,100,400,300, 10);
  7.      };
  8. 8 </script>
  1.      <script>   //椭圆
  2.      window.onload=function (){
  3.        let paper=Raphael(0,0,800,600);
  4.  
  5.        //图形
  6.        let rect=paper.ellipse(400, 300, 250, 150);
  7.      };
  8. 8     </script>
  1.     <script>    //图片
  2.     window.onload=function (){
  3.       let paper=Raphael(0,0,800,600);
  4.   </span><span style="color: #008000;">//</span><span style="color: #008000;">图形</span>
  5.   let rect=paper.image('bd_logo.png', 50, 50,540,258<span style="color: #000000;">);
  6. };
  7. </span>&lt;/script&gt;</pre>
  8.  
  1.     <script>      //path
  2.     window.onload=function (){
  3.       let paper=Raphael(0,0,800,600);
  4.   </span><span style="color: #008000;">//</span><span style="color: #008000;">图形</span>
  5.   let rect=paper.path("M 100 100 L 400 100 400 300 100 300 Z"<span style="color: #000000;">)
  6. };
  7. </span>&lt;/script&gt;</pre>
  8.  
  1.     <script>     //事件
  2.     window.onload=function (){
  3.       var paper=Raphael(0,0,800,600);
  4.   </span><span style="color: #008000;">//</span><span style="color: #008000;">图形</span>
  5.   <span style="color: #0000ff;">var</span> path=paper.path("M 100 100 L 400 100 400 300 100 300 Z"<span style="color: #000000;">);
  6.   path.attr(</span>'fill', 'yellow'<span style="color: #000000;">);
  8.   path.hover(</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (){
  9.     </span><span style="color: #0000ff;">this</span>.attr('fill', 'green'<span style="color: #000000;">);
  10.   }, </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (){
  11.     </span><span style="color: #0000ff;">this</span>.attr('fill', 'yellow'<span style="color: #000000;">);
  12.   });
  14.   setTimeout(</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (){
  15.     path.unhover();
  16.   }, </span>5000<span style="color: #000000;">);
  17. };
  18. </span>&lt;/script&gt;</pre>
  19.  
  1.     <script>  //transform
  2.     window.onload=function (){
  3.       var paper=Raphael(0,0,800,600);
  4.   </span><span style="color: #008000;">//</span><span style="color: #008000;">图形</span>
  5.   <span style="color: #0000ff;">var</span> rect=paper.rect(100, 100, 300, 200<span style="color: #000000;">);
  6.   rect.attr(</span>'fill', 'yellow'<span style="color: #000000;">);
  8.   rect.click(</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (){
  9.     </span><span style="color: #0000ff;">this</span>.attr('transform', 's2,1 r30'<span style="color: #000000;">);
  10.   });
  11. };
  12. </span>&lt;/script&gt;</pre>
  13.  
  1. <!DOCTYPE html>    //动画
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <script src="raphael.js" charset="utf-8"></script>
  7.     <script>
  8.     window.onload=function (){
  9.       let paper=Raphael(50,50,800,600);
  10.       let types=['linear', 'easeIn', 'easeOut', 'easeInOut', 'backIn', 'backOut', 'elastic', 'bounce'];
  11.       let oBtn=document.getElementById('btn1');
  12.   </span><span style="color: #008000;">//</span><span style="color: #008000;">图形</span>
  13.   let rects=types.map((type,index)=&gt;<span style="color: #000000;">{
  14.     </span><span style="color: #0000ff;">var</span> rect=paper.rect(0, 60*index, 50, 50<span style="color: #000000;">);
  15.     rect.attr(</span>'fill', 'yellow'<span style="color: #000000;">);
  17.     </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> rect;
  18.   });
  20.   </span><span style="color: #008000;">//
  21.  
  22. oBtn.onclick=function (){

  23. rects.forEach((rect, index)=>{

  24. rect.animate({'x': 600}, 3000, types[index]);

  25. });

  26. };

  27. };

  28. </script>

  29. </head>

  30. <body>

  31. <input type="button" name="" value="走" id="btn1">

  32. </body>

  33. </html>

  1.     <script>    //   好玩的东西
  2.     window.onload=function (){
  3.       let paper=Raphael(50,50,800,600);
  4.   let path</span>=paper.path('M 100 100 L 400 100 400 300 100 300 Z'<span style="color: #000000;">);
  5.   path.attr(</span>'fill', 'yellow'<span style="color: #000000;">);
  7.   path.hover(</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (){
  8.     </span><span style="color: #0000ff;">this</span>.animate({'path': 'M 250 100 L 250 100 400 300 100 300 Z'}, 700, 'bounce'<span style="color: #000000;">);
  9.   }, </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (){
  10.     </span><span style="color: #0000ff;">this</span>.animate({'path': 'M 100 100 L 400 100 400 300 100 300 Z'}, 700, 'bounce'<span style="color: #000000;">);
  11.   });
  12. };
  13. </span>&lt;/script&gt;</pre>
  14.  

Raphael.js--基础1的更多相关文章

  1. 学习RaphaelJS矢量图形包--Learning Raphael JS Vector Graphics中文翻译（一）

    (原文地址:http://www.cnblogs.com/idealer3d/p/LearningRaphaelJSVectorGraphics.html) 前面3篇博文里面,我们讲解了一本叫做< ...

  2. 强大的矢量图形库：Raphael JS 中文帮助文档及教程

    Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库.它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出 ...

  3. Raphael Js矢量库API简介：

    Raphael Js矢量库API简介:Raphael Javascript 是一个 Javascript的矢量库. 2010年6月15日,著名的JavaScript库ExtJS与触摸屏代码库项目jQT ...

  4. Raphael.js改变元素层叠顺序

    Raphael.js 元素(Element)改变层叠顺序,Raphael.js是一个矢量绘图库兼容svg和vml.初学时感觉css的z-index能搞定,结果是不支持,不过矢量绘图符合dom标准.可以 ...

  5. js 基础篇（点击事件轮播图的实现）

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  6. js 基础

    js基础知识点总结 如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...

  7. js基础练习二之简易日历

    今天学到了js基础教程3,昨天的课后练习还没来的及做,这个是类似简易日历的小案例,视频还没听完,今晚继续...... 先看效果图: 其实做过前面的Tab选项卡,这个就很好理解了,通过鼠标放在不同月份月 ...

  8. [JS复习] JS 基础知识

    项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容 豁然开朗. [1. 用于范围的标签] display  :inline or bloc ...

  9. JS基础（超级简单）

    1     JS基础(超级简单) 1.1 数据类型 1.1.1   基本类型: 1)        Number:特别注意:NaN的检测方法:Nan!=NaN;或者使用isNaN方法 2)       ...

  10. Node.js基础与实战

    Node.js基础与实战 Node.jsJS高级进阶 NODE原理与解析 REPL交互环境 模块与NPM Buffer缓存区 fs文件操作 Stream流 TCP&UDP 异步编程 HTTP& ...

随机推荐

  1. bytes,bytearray

    1.bytes.bytearray ---Python3 引入的! bytes:不可变字节序列,bytearray:字节属组,可变 都是连续的空间. 2.字符串与bytes 字符串是字符组成的有序的序 ...

  2. kettle 通用的数据库迁移流程

    需求: 1.你是否遇到了需要将mysql数据库中的所有表与数据迁移到Oracle. 2.你是否还在使用kettle重复的画着:表输入-表输出.创建表,而烦恼. 下面为你实现了一套通用的数据库迁移流程. ...

  3. Python 3+selenium+unittest+HTMLTestRunner生成测试报告

    一.下载HTMLTestRunner.py,解压,将它放到 python安装路径的site-packages目录下 https://pan.baidu.com/s/1epWlibxbxWlNoIcxL ...

  4. linux常用命令简述

    新的公司,新的挑战.对于php的有点老油条来说,是一个不错的历练机会.调整自己,归零心态.永不放弃学习! 言归正传. 1.查找 find 主要用于做文件夹的查找. find hosts grep用于查 ...

  5. afn3.0源码解析---AFURLRequestSerialization

    AFHTTPRequestSerialization: @方法1 - (NSMutableURLRequest *)requestWithMethod:(NSString *)method URLSt ...

  6. 彻底清空SharePoint回收站（仅限IE）

    1.导航到回收站页面2.F12,在控制台输入javascript:emptyItems()3.回车 4.点击确定即可 注意:这种方法可能只适用于Internet Explorer

  7. 学习MySQL过程中的随笔一

    第一天: 关于安装出现了很多问题,各种不懂的bug,没得法只能在网上查找解决方法,终于!!! 登录成功了,一下午的时间 附上参考资料:https://blog.csdn.net/weibo_boer/ ...

  8. 程序设计与算法（一）C语言程序设计CAP之字符串

    C++中的字符串 字符串有三种形式 用双引号括起来的字符串常量,如果"CHINA"."C++ program" 存放于字符串数组中,以'\0'字符(ASCII吗 ...

  9. Java数组之二维数组

    Java中除了一维数组外,还有二维数组,三维数组等多维数组.本文以介绍二维数组来了解多维数组. 1.二维数组的基础 二维数组的定义:二维数组就是数组的数组,数组里的元素也是数组. 二维数组表示行列二维 ...

  10. LightGBM总结

    一.LightGBM介绍 LightGBM是一个梯度Boosting框架,使用基于决策树的学习算法.它可以说是分布式的,高效的,有以下优势: 1)更快的训练效率 2)低内存使用 3)更高的准确率 4) ...