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>Raphael.js--基础1
原文地址：https://www.cnblogs.com/cxmSuperman/p/10583279.html