Raphael.js--基础1

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

例子：

 <script>　　　　　　//基础用法

 window.onload=function (){

 let paper=Raphael(0,0,800,600);

 //图形

 let rect=paper.rect(100,100,400,300);

 //属性&样式

 rect.attr('fill', '#CCC');

 //事件

 rect.click(function (){

 //this.attr('fill', 'red');

 //alert(this.attr('fill'));

 this.attr({fill: 'red', width: '200', height: '150'});

 });

 };

 </script>

 <script>    //圆角矩形

     window.onload=function (){

       let paper=Raphael(0,0,800,600);

       //图形

       let rect=paper.rect(100,100,400,300, 10);

     };

8 </script>

     <script>   //椭圆

     window.onload=function (){

       let paper=Raphael(0,0,800,600);

       //图形

       let rect=paper.ellipse(400, 300, 250, 150);

     };

8     </script>

    <script>    //图片

    window.onload=function (){

      let paper=Raphael(0,0,800,600);
  </span><span style="color: #008000;">//</span><span style="color: #008000;">图形</span>

  let rect=paper.image('bd_logo.png', 50, 50,540,258<span style="color: #000000;">);

};

</span>&lt;/script&gt;</pre>

    <script>      //path

    window.onload=function (){

      let paper=Raphael(0,0,800,600);
  </span><span style="color: #008000;">//</span><span style="color: #008000;">图形</span>

  let rect=paper.path("M 100 100 L 400 100 400 300 100 300 Z"<span style="color: #000000;">)

};

</span>&lt;/script&gt;</pre>

    <script>     //事件

    window.onload=function (){

      var paper=Raphael(0,0,800,600);
  </span><span style="color: #008000;">//</span><span style="color: #008000;">图形</span>

  <span style="color: #0000ff;">var</span> path=paper.path("M 100 100 L 400 100 400 300 100 300 Z"<span style="color: #000000;">);

  path.attr(</span>'fill', 'yellow'<span style="color: #000000;">);

  path.hover(</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (){

    </span><span style="color: #0000ff;">this</span>.attr('fill', 'green'<span style="color: #000000;">);

  }, </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (){

    </span><span style="color: #0000ff;">this</span>.attr('fill', 'yellow'<span style="color: #000000;">);

  });

  setTimeout(</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (){

    path.unhover();

  }, </span>5000<span style="color: #000000;">);

};

</span>&lt;/script&gt;</pre>

    <script>  //transform

    window.onload=function (){

      var paper=Raphael(0,0,800,600);
  </span><span style="color: #008000;">//</span><span style="color: #008000;">图形</span>

  <span style="color: #0000ff;">var</span> rect=paper.rect(100, 100, 300, 200<span style="color: #000000;">);

  rect.attr(</span>'fill', 'yellow'<span style="color: #000000;">);

  rect.click(</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (){

    </span><span style="color: #0000ff;">this</span>.attr('transform', 's2,1 r30'<span style="color: #000000;">);

  });

};

</span>&lt;/script&gt;</pre>

<!DOCTYPE html>    //动画

<html>

  <head>

    <meta charset="utf-8">

    <title></title>

    <script src="raphael.js" charset="utf-8"></script>

    <script>

    window.onload=function (){

      let paper=Raphael(50,50,800,600);

      let types=['linear', 'easeIn', 'easeOut', 'easeInOut', 'backIn', 'backOut', 'elastic', 'bounce'];

      let oBtn=document.getElementById('btn1');
  </span><span style="color: #008000;">//</span><span style="color: #008000;">图形</span>

  let rects=types.map((type,index)=&gt;<span style="color: #000000;">{

    </span><span style="color: #0000ff;">var</span> rect=paper.rect(0, 60*index, 50, 50<span style="color: #000000;">);

    rect.attr(</span>'fill', 'yellow'<span style="color: #000000;">);

    </span><span style="color: #0000ff;">return</span><span style="color: #000000;"> rect;

  });

  </span><span style="color: #008000;">//


oBtn.onclick=function (){


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


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


});


};


};


</script>


</head>


<body>


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


</body>


</html>

    <script>    //   好玩的东西

    window.onload=function (){

      let paper=Raphael(50,50,800,600);
  let path</span>=paper.path('M 100 100 L 400 100 400 300 100 300 Z'<span style="color: #000000;">);

  path.attr(</span>'fill', 'yellow'<span style="color: #000000;">);

  path.hover(</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (){

    </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;">);

  }, </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> (){

    </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;">);

  });

};

</span>&lt;/script&gt;</pre>

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

学习RaphaelJS矢量图形包--Learning Raphael JS Vector Graphics中文翻译（一）
(原文地址:http://www.cnblogs.com/idealer3d/p/LearningRaphaelJSVectorGraphics.html) 前面3篇博文里面,我们讲解了一本叫做< ...
强大的矢量图形库：Raphael JS 中文帮助文档及教程
Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库.它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出 ...
Raphael Js矢量库API简介：
Raphael Js矢量库API简介:Raphael Javascript 是一个 Javascript的矢量库. 2010年6月15日,著名的JavaScript库ExtJS与触摸屏代码库项目jQT ...
Raphael.js改变元素层叠顺序
Raphael.js 元素(Element)改变层叠顺序,Raphael.js是一个矢量绘图库兼容svg和vml.初学时感觉css的z-index能搞定,结果是不支持,不过矢量绘图符合dom标准.可以 ...
js 基础篇（点击事件轮播图的实现）
轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现首 ...
js 基础
js基础知识点总结如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...
js基础练习二之简易日历
今天学到了js基础教程3,昨天的课后练习还没来的及做,这个是类似简易日历的小案例,视频还没听完,今晚继续...... 先看效果图: 其实做过前面的Tab选项卡,这个就很好理解了,通过鼠标放在不同月份月 ...
[JS复习] JS 基础知识
项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容豁然开朗. [1. 用于范围的标签] display :inline or bloc ...
JS基础（超级简单）
1 JS基础(超级简单) 1.1 数据类型 1.1.1 基本类型: 1) Number:特别注意:NaN的检测方法:Nan!=NaN;或者使用isNaN方法 2) ...
Node.js基础与实战
Node.js基础与实战 Node.jsJS高级进阶 NODE原理与解析 REPL交互环境模块与NPM Buffer缓存区 fs文件操作 Stream流 TCP&UDP 异步编程 HTTP& ...

随机推荐

使用Eureka作为springcloud的注册机
使用springcloud做项目的负载均衡,需要导的jar这里不再显示,具体配置如下: 作为被注册服务配置: 启动多台服务端就可以实现集群,相应的localhost需要转成真实的ip 当然一个项目还要 ...
Windows 主机名映射地址
在开发中大数据集群中我们自己的电脑主机名映射不到集群的主机名下面我们就去修改自己电脑主机名映射地址 c/Windows/System32/drivers/etc/host 文件将主机名和IP地址 ...
几个bat文件（关于robot freamwork安装）
如果安装后没有这几文件,或者在运行后提示文件缺少这个文件 , 就需要手动创建. 一般文件在 :C:\Python27\Scripts 这个目录下 1.pybot.bat文件: @echo o ...
去除桌面SVN问号
由于误操作,桌面文件全部带着问号. 找到一种比较方便的方法解决. 1.显示受保护文件.文件夹win7系统 - 随便打开一个文件夹 - 在菜单栏里点工具 - 文件夹选项 - 查看以下如图中选择 2 ...
centos 7安装mysql 执行./scripts/mysql_install_db --user=mysql 报错 FATAL ERROR: please install the following Perl modules before executing ./scripts/mysql_install_db: Data::Dumper
[root@localhost mysql]# ./scripts/mysql_install_db --user=mysql FATAL ERROR: please install the fol ...
pandas（二）
层级索引: index=[('a',2010),('b',2011),('c',2010'),('a',2012),('e',2010),('f',2011)] age=[18,17,18,16,18 ...
php优秀的库
PHP 是一种通用开源脚本语言.语法吸收了 C 语言.Java 和 Perl 的特点,利于学习,使用广泛,主要适用于 Web 开发领域,是大多数后端开发者的首选.PHP 作为最受欢迎的编程语言之一,经 ...
python中利用matplotlib绘图可视化知识归纳
python中利用matplotlib绘图可视化知识归纳: (1)matplotlib图标正常显示中文 import matplotlib.pyplot as plt plt.rcParams['fo ...
PHP----------线程安全和非线程安全的介绍
1.Linux下的PHP,没有线程安全版和非线程安全版之分.从2000年10月20日发布的第一个Windows版的PHP3.0.17开始的都是线程安全的版本,直至5.2.1版本开始有Thread Sa ...
spark的运行模式
1.local(本地模式) 单机模式,通常用来测试将spark应用以多线程方式,直接运行在本地本地模式可以启动多个executor不过上限不能超过cpu数 2.standalone(独立模式) 独 ...

Raphael.js--基础1

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

随机推荐

热门专题