Raphael.js--基础1-CSDN博客

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.οnlοad=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.οnlοad=function (){
3       let paper=Raphael(0,0,800,600);
4 
5       //图形
6       let rect=paper.rect(100,100,400,300, 10);
7     };
8 </script>

1     <script>   //椭圆 
2     window.οnlοad=function (){
3       let paper=Raphael(0,0,800,600);
4 
5       //图形
6       let rect=paper.ellipse(400, 300, 250, 150);
7     };
8     </script>

    <script>    //图片
    window.οnlοad=function (){
      let paper=Raphael(0,0,800,600);

      //图形
      let rect=paper.image('bd_logo.png', 50, 50,540,258);
    };
    </script>

    <script>      //path
    window.οnlοad=function (){
      let paper=Raphael(0,0,800,600);

      //图形
      let rect=paper.path("M 100 100 L 400 100 400 300 100 300 Z")
    };
    </script>

    <script>     //事件
    window.οnlοad=function (){
      var paper=Raphael(0,0,800,600);

      //图形
      var path=paper.path("M 100 100 L 400 100 400 300 100 300 Z");
      path.attr('fill', 'yellow');

      path.hover(function (){
        this.attr('fill', 'green');
      }, function (){
        this.attr('fill', 'yellow');
      });

      setTimeout(function (){
        path.unhover();
      }, 5000);
    };
    </script>

    <script>  //transform
    window.οnlοad=function (){
      var paper=Raphael(0,0,800,600);

      //图形
      var rect=paper.rect(100, 100, 300, 200);
      rect.attr('fill', 'yellow');

      rect.click(function (){
        this.attr('transform', 's2,1 r30');
      });
    };
    </script>

<!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');

      //图形
      let rects=types.map((type,index)=>{
        var rect=paper.rect(0, 60*index, 50, 50);
        rect.attr('fill', 'yellow');

        return rect;
      });

      //
      oBtn.οnclick=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.οnlοad=function (){
      let paper=Raphael(50,50,800,600);

      let path=paper.path('M 100 100 L 400 100 400 300 100 300 Z');
      path.attr('fill', 'yellow');

      path.hover(function (){
        this.animate({'path': 'M 250 100 L 250 100 400 300 100 300 Z'}, 700, 'bounce');
      }, function (){
        this.animate({'path': 'M 100 100 L 400 100 400 300 100 300 Z'}, 700, 'bounce');
      });
    };
    </script>