[GraphicsJS] 線を描く

そうだ! SVGを触ってみよう! :bouzu:

早速、GraphicsJSを使って、線を描いてみるよ。 :bouzu:

graphicsjs_figure_basic

:check: 「GraphicsJS | AnyChart
v1.3.5 をダウンロードしたよ。(18/12/20 現在)

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>figure [basic] | GraphicsJS</title>
<script src="js/easeljs-0.8.1.min.js"></script>
<script src="js/stats.min.js"></script>
<style type="text/css">
  #canvas{
    display:block;
    width:800px;
    margin-top:480px;
    margin-left:auto;
    margin-right:auto;
    padding-left:0;
    padding-right:0;
  }
</style>
<script>
var stage, stats;

function init() {
  stats = new Stats();
  stats.setMode(0);
  stats.domElement.style.position = "fixed";
  stats.domElement.style.right = "0px";
  stats.domElement.style.top = "0px";
  document.body.appendChild(stats.domElement);
  setInterval(function() { stats.update(); }, 1000/30);

  stage = acgraph.create(”canvas”);

  background();

  initialize();
}
function initialize() {
  //太さ1の直線
  var line1 = stage.path().stroke(”#FFFFFF”, 1);
  line1.moveTo(80, 120).lineTo(80, 240).close();
  //太さ2の直線
  var line2 = stage.path().stroke(”#FFFFFF”, 2);
  line2.moveTo(80, 300).lineTo(80, 420).close();
  //太さ1の二等辺三角形
  var triangle1 = stage.path().stroke(”#FFFFFF”, 1);
  triangle1.moveTo(240, 120).lineTo(180, 240, 300, 240).close();
  //太さ2の二等辺三角形
  var triangle2 = stage.path().stroke(”#FFFFFF”, 2);
  triangle2.moveTo(240, 300).lineTo(180, 420, 300, 420).close();
  //太さ1の長方形
  var rectangle1 = stage.rect(400, 120, 160, 120).stroke(”#FFFFFF”, 1);
  //太さ2の長方形
  var rectangle2 = stage.rect(400, 300, 160, 120).stroke(”#FFFFFF”, 2);
  //太さ1の円
  var circle1 = stage.circle(700, 180, 60).stroke(”#FFFFFF”, 1);
  //太さ2の円
  var circle2 = stage.circle(700, 360, 60).stroke(”#FFFFFF”, 2);
}
function background() {
  var sky = stage.rect(0, 0,, 800, 480).stroke(0);
  sky.fill(["#0069A0", "#00AAE4"], 270);

  var basic = stage.text(10, 5, "HTML5 / GraphicsJS [1.3.5]", {width: "200px", fontSize: "14px", fontFamily: "Myriad Pro", color: ”#FFFFFF”, opacity: ”0.6”});
  basic.hAlign("left");
  var title = stage.text(200, 41, "figure [basic]", {width: "400px", fontSize: "24px", fontFamily: "Myriad Pro", color: ”#FFFFFF”, opacity: ”0.6”});
  title.hAlign("center");
  var publish = stage.text(590, 5, "authoring: Sublime Text 2", {width: "200px", fontSize: "14px", fontFamily: "Myriad Pro", color: ”#FFFFFF”, opacity: ”0.6”});
  publish.hAlign("right");
}
</script>
</head>
<body onload="init();" style="background-color:#EEEEEE">
  <div id="canvas"></div>
</body>
</html>