
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></script></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></script></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></script></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></script></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)=><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></script></pre>