カテゴリー
未分類

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();
})();

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA