[Snap.svg] 線を描く

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

Snap.svgを使って、線を描いてみるよ。 :bouzu:

snapsvg_figure_basic

:check: 「Snap.svg - Home
v0.5.1 をダウンロードしたよ。(18/12/20 現在)

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>figure [basic] | Snap.svg</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 canvas, 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);

  canvas = document.getElementById("canvas");

  canvas = Snap(”#canvas”);
  stage = Snap(800, 480);
  canvas.add(stage);

  background();

  initialize();
}
function initialize() {
  //太さ1の直線
  var line1 = stage.line(80, 120, 80, 240).attr({stroke: ”#FFFFFF”, strokeWidth: 1});
  //太さ2の直線
  var line2 = stage.line(80, 300, 80, 420).attr({stroke: ”#FFFFFF”, strokeWidth: 2});
  //太さ1の二等辺三角形
  var triangle1 = stage.polygon(240, 120, 180, 240, 300, 240).attr({fill: ”none”, stroke: ”#FFFFFF”, strokeWidth: 1});
  //太さ2の二等辺三角形
  var triangle2 = stage.polygon(240, 300, 180, 420, 300, 420).attr({fill: ”none”, stroke: ”#FFFFFF”, strokeWidth: 2});
  //太さ1の長方形
  var rectangle1 = stage.rect(400, 120, 160, 120).attr({fill: ”none”, stroke: ”#FFFFFF”, strokeWidth: 1});
  //太さ2の長方形
  var rectangle2 = stage.rect(400, 300, 160, 120).attr({fill: ”none”, stroke: ”#FFFFFF”, strokeWidth: 2});
  //太さ1の円
  var circle1 = stage.circle(700, 180, 60).attr({fill: ”none”, stroke: ”#FFFFFF”, strokeWidth: 1});
  //太さ2の円
  var circle2 = stage.circle(70, 360, 60).attr({fill: ”none”, stroke: ”#FFFFFF”, strokeWidth: 2});
}
function background() {
  var gradient = stage.gradient("l(0, 0, 0, 1)#0069A0-#00AAE4");
  var sky = stage.rect(0, 0, 800, 480).attr({fill: gradient});

  var basic = stage.text(10, 16, "HTML5 / Snap.svg [0.5.1]");
  basic.attr({fontSize: "14px", fill: ”#FFFFFF”, fontFamily: "Myriad Pro", opacity: 0.6, textAnchor: "start”});
  var title = stage.text(400, 59, "figure [basic]");
  title.attr({fontSize: "24px", fill: ”#FFFFFF”, fontFamily: "Myriad Pro", opacity: 0.6, textAnchor: "middle"});
  var publish = stage.text(790, 16, "authoring: Sublime Text 2");
  publish.attr({fontSize: "14px", fill: ”#FFFFFF”, fontFamily: "Myriad Pro", opacity: 0.6, textAnchor: "end"});
}
</script>
</head>
<body onload="init();" style="background-color:#EEEEEE">
  <div id="canvas"></div>
</body>
</html>