带有RaphaëlJavaScript库的简单矢量图形

Raphaël是Atlassian的Dmitry Baranovskiy编写的一个小型JavaScript库，它使您可以在网页中创建和处理矢量图形。 它非常易于使用，并且与跨浏览器兼容。 支持Internet Explorer 6.0 +，Safari 3.0 +，Firefox 3.0+和Opera 9.5+。 在内部，Raphaël在其他浏览器中的IE和SVG中使用VML。

现在，涉及圆形和正方形的演示很好，但我想创建一个示例来演示矢量图形的合法，实际使用。 那么实时统计测量呢？ 这是我的当前链轮使用情况折线图的屏幕截图，该图绘制了实时“链轮”使用水平。 最棒的是，这很容易做到。

HTML很简单； 我们只需要一个标题和容器来容纳我们的画布-一个div元素：

<h1>Current Sprocket Usage: <span id="readout"></span></h1>
<div id="graph"></div>

首先，我们必须生成一个新的图形画布。 我总是喜欢将所有代码放在对象定义中，以创建一个单独的名称空间，因此我们将从以下代码开始：

var SpGraph = {
  init : function(){
    SpGraph.graph = Raphael("graph", 400, 200);
    SpGraph.graph.rect(0, 0, 390, 110, 10).attr("fill", "#000");
  }
}

window.onload = function () {
  SpGraph.init();
};

使用window.onload事件，我们调用SpGraph.init方法。 在此方法中，我们使用Raphael("graph", 400, 200)创建画布。 第一个参数是容器元素的ID，其他两个参数分别代表宽度和高度。 我们将返回的画布对象存储在SpGraph.graph属性中。 在下一行中，我们创建一个矩形并设置一些属性：

SpGraph.graph.rect(0, 0, 390, 110, 10).attr("fill", "#000");

rect方法允许我们绘制一个矩形，该矩形指定x坐标，y坐标，宽度，高度以及可选的拐角半径。 注意，我们还链接了一个对attr方法的调用以设置填充颜色。 所有Raphaël图形对象都支持attr方法，并且可以设置一系列属性。 Raphaël支持链接其所有方法，我们很快将利用它。 到目前为止，我们的努力已使这个可爱的带有圆角的黑色矩形成为可能。

现在让我们添加条纹！ 为此，我们将以下循环添加到SpGraph.init方法中：

for(var x = 10; x < 110; x += 10) {
  var c = (x > 10) ? "#333" : "#f00";
  SpGraph.graph.path({stroke: c}).moveTo(0, x).lineTo(390,x);
}

循环执行10次，每次绘制一条线； 第一条为红线，其他为灰线。 Raphaël path方法初始化图形的路径模式，并返回path对象。 它实际上并没有画任何东西。 您必须使用可链接的path对象方法。 moveTo方法将绘图光标移动到指定的x和y坐标， lineTo方法在光标点到指定点之间绘制一条线。 结果是下面的条纹背景：

因此，现在我们必须绘制实际的图形线。 垂直轴（由条纹表示）是百分比使用水平。 水平轴将以10像素为增量表示时间。 在现实世界中，可以通过Ajax调用（例如，每5秒一次）获得图形的每次更新，但是在这里，我只是创建随机值并每秒更新图形。 再次，我们使用path方法绘制一条5像素宽的线。

我们初始化路径并将其引用存储在SpGraph.path属性中，如下所示：

SpGraph.path = SpGraph.graph.path({
    stroke: "#0f0",
    "stroke-width": 5, 
    "fill-opacity": 0
}).moveTo(20, 110);

每次更新时，我们都使用lineTo方法扩展行，如下所示：

SpGraph.path.lineTo(20+SpGraph.updates*10, 110-perf);

 perf is a random value between 0 and 100. The SpGraph.updates property is a simple counter that allows us to control how many updates before the line is reset. The counter value is also used to plot the location of the line on the horizontal axis. After 35 updates the line is reset by removing it, using the SpGraph.path.remove method, and starting a new one.
So the whole script looks like this:
var SpGraph = {
  init : function(){
    SpGraph.graph = Raphael("graph", 400, 200);
    SpGraph.graph.rect(0, 0, 390, 110, 10).attr("fill", "#000");

    for(var x = 10; x < 110; x += 10) {
      var c = (x > 10) ? "#333" : "#f00";
      SpGraph.graph.path({stroke: c}).moveTo(0, x).lineTo(390,x);
    }
    SpGraph.startPath();
    SpGraph.updateGraph();
  },
  startPath : function() {
    if(SpGraph.path) {
      SpGraph.path.remove();
    }
    SpGraph.path = SpGraph.graph.path({
        stroke: "#0f0",
        "stroke-width": 5, 
        "fill-opacity": 0
    }).moveTo(20, 110);
  },
  updateGraph : function() {
    if(SpGraph.updates++ < 36) {
      // imagine this value comes from an ajax request
      var perf = Math.floor(Math.random() * 100);
      SpGraph.path.lineTo(20+SpGraph.updates*10, 110-perf);
      document.getElementById('readout').innerHTML = perf+'%';
    } else {
      SpGraph.updates = 0;
      SpGraph.startPath();
    }
    SpGraph.timer = setTimeout("SpGraph.updateGraph();",1000);
  },
  updates : 0
}
window.onload = function () {
  SpGraph.init();
};
Don't forget to see it working in the demo . OK, so maybe a sprocket usage graph isn't exactly the legitimate, practical example I promised, but at least you got a look at what you can achieve with Raphaël with only a little effort. The documentation on the site isn't complete, but it's not too difficult to work out anyway. Why don't you have a go yourself? Quick, Simple, cross-browser compatible, vector graphics on the web has never been easier.

From: https://www.sitepoint.com/easy-vector-graphics-with-the-raphael-javascript-library/