彩票走势图

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。

点击下载GoJS最新版

GoJS具有用于创建图像的两个功能：Diagram.makeImageData，它输出一个Base64图像数据串，和Diagram.makeImage，这是一个方便的功能调用Diagram.makeImageData并返回一个新HTMLImageElement与图像数据作为其源。这两个函数具有相同的单个参数，即JavaScript对象，其中包含几个可定义的属性，在文档中进行了枚举。
该页面几乎与制作SVG上的页面相同，该页面显示了如何渲染SVG元素而不是PNG图像。

myDiagram.makeImage（）;

myDiagram.makeImage({
  scale: 1
});

myDiagram.makeImage({
  scale: 2
});

myDiagram.makeImage({
  size: new go.Size(100,100)
});

myDiagram.makeImage（{
   size：new go.Size（100，NaN）
}）;

 myPartsList = new go.List();
  myPartsList.add(myDiagram.findNodeForKey("Beta"));
  myPartsList.add(myDiagram.findNodeForKey("Delta"));
myDiagram.makeImage({
  parts: myPartsList
});

myDiagram.makeImage（{
   parts：myDiagram.links
}）;

myDiagram.makeImage({
  scale: 1.5,
  size: new go.Size(100,100)
});

myDiagram.makeImage（{
   scale：9，
   maxSize：new go.Size（600，NaN）
}）;

myDiagram.makeImage({
  position: new go.Point(20,20),
  size: new go.Size(50,50)
});

myDiagram.makeImage（{
   size：new go.Size（NaN，250），
   background：“ rgba（  0，255，0，0.5 ）” //半透明的绿色背景
}）;

在下面的代码中，我们使用文档边界将Diagram分成四个相等的部分，从而在每个部分中制作出四个图像。通过这种方式，我们可以为分页，制作图库或打印目的准备图像。创建的四个图像如下所示。

var d = myDiagram.documentBounds;
    var halfWidth = d.width / 2;
    var halfHeight = d.height / 2;
    img = myDiagram.makeImage({
            position: new go.Point(d.x, d.y),
            size: new go.Size(halfWidth,halfHeight)
          });
    addImage(img); // Adds the image to a DIV below

    img = myDiagram.makeImage({
            position: new go.Point(d.x + halfWidth, d.y),
            size: new go.Size(halfWidth,halfHeight)
          });
    addImage(img);

    img = myDiagram.makeImage({
            position: new go.Point(d.x, d.y+ halfHeight),
            size: new go.Size(halfWidth,halfHeight)
          });
    addImage(img);

    img = myDiagram.makeImage({
            position: new go.Point(d.x + halfWidth, d.y + halfHeight),
            size: new go.Size(halfWidth,halfHeight)
          });
    addImage(img);

我们可以设置参数对象的类型和详细信息属性，以检索不同种类的图像。唯一受广泛支持的类型是“ image / jpeg”。jpeg的详细信息通过使用0到1之间的值（包括0和1）来确定其质量。Jpegs通常不用于图表，因为它们的有损压缩会导致文本不可读。

下图是输出的jpeg。请注意透明背景如何变为黑色，因为jpeg格式不支持alpha透明，并且HTML5画布的默认状态是完全透明的黑色像素rgba（0,0,0,0）。

myDiagram.makeImage（{
   scale：1，
   type：“ image / jpeg”
}）;

myDiagram.makeImage({
  scale: 1,
  background: "AntiqueWhite",
  type: "image/jpeg"
});

myDiagram.makeImage({
  scale: 1,
  background: "AntiqueWhite",
  type: "image/jpeg",
  details: 0.05
});

下载图像