Raphael.js--基础1

时间：2023-03-10 03:01:47
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>

相关文章