塩焼きブログ

塩焼きに関しての研究内容を公開しています

JavaScriptを使ってCanvas要素に図形を書く

canvas要素を書いたHTMLを設置する

<html>
<head>
  <title>example.html</title>
</head>
<body>
  <h1>Updates</h1>
  <canvas id="chart"></canvas>
  <script src="/example.js"></script>
</body>
</html>

getContext()を使って逆三角形を作成する

(function() {
  var chart = document.getElementById('chart');
  if (! chart.getContext) {
    return;
  }
  chart.width = 200;
  chart.height = 200;

  var c = chart.getContext('2d');
  c.moveTo(0, 0);
  c.lineTo(200, 0);
  c.lineTo(100, 200);
  c.closePath();
  c.fillStyle = '#0000ff';
  c.fill();
})();

より細かく描画させることで複雑な図形やグラフを描画することも可能