标签：attr 16px 兼容 line load 参数说明 src xms mat
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 </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 </script>
<script> //图片 window.onload=function (){ let paper=Raphael(0,0,800,600); //图形 let rect=paper.image(‘bd_logo.png‘, 50, 50,540,258); }; </script>
<script> //path window.onload=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.onload=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.onload=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.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=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>
标签：attr 16px 兼容 line load 参数说明 src xms mat
原文地址：https://www.cnblogs.com/cxmSuperman/p/10583279.html
