Raphael js 是一个能简化web 矢量图绘制的javascript 库。运用Raphael js能很容易的绘制图表或者旋转组件。

Raphael 采用W3C推荐的SVG以及VML来绘制图形,也就是每个图形就是一个DOM元素,所以你能够很容易取得javascript事件句柄。Raphael 的目的就是提供一种更合适,更容易的的方法来绘制跨平台的矢量图。

Raphael 目前支持的浏览器有Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

第一个demo:

<!doctype html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <title>1</title>
</head>
<body>
<div id="canvas"></div>
<script type="text/javascript" src="http://raphaeljs.com/raphael.js"></script>     
<script type="text/javascript">
var paper = Raphael(10, 50, 500, 500);

var circle = paper.circle(50, 40, 10);

circle.attr("fill", "#f00");
circle.attr("stroke", "#fff");

</script>
</body>
</html>

效果:请输入图片描述


小渝人儿
1.1k 声望849 粉丝

前端工程师