canvas - HTML

直線を引く

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <title>sample</title>
</head>
<body>
  <canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

style.css

#myCanvas {
  border: 1px solid black;
}

script.js

window.addEventListener('load', function(){
  const cs = document.getElementById('myCanvas'),
        ctx = cs.getContext('2d'),
        csWidth = cs.width,
        csHeight = cs.height,
        center = {
          x: csWidth / 2,
          y: csHeight / 2
        };

  

  // 横線の定義
  const horizontal_line = function() {
    ctx.beginPath();
    ctx.lineWidth = 1; // 線の太さ
    ctx.strokeStyle = 'blue'; // 線の色
    ctx.moveTo(0, center.y);
    ctx.lineTo(csWidth, center.y);
    ctx.closePath();
    ctx.stroke();
  };

  horizontal_line();

  // 縦線の定義
  var vertical_line = function() {
    ctx.beginPath();
    ctx.lineWidth = 10; // 線の太さ
    ctx.strokeStyle = 'red'; // 線の色
    ctx.moveTo(center.x, 0);
    ctx.lineTo(center.x, csHeight);
    ctx.closePath();
    ctx.stroke();
  };

  vertical_line();
})

三角形を描く

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <title>sample</title>
</head>
<body>
  <canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

style.css

#myCanvas {
  border: 1px solid black;
}

script.js

window.addEventListener('load', function(){
  const cs = document.getElementById('myCanvas'),
        ctx = cs.getContext('2d');

  ctx.beginPath();
  ctx.moveTo(50, 50);
  ctx.lineTo(100, 50);
  ctx.lineTo(100, 100);
  ctx.closePath();
  ctx.stroke();
  // ctx.fill(); // フィルを塗りつぶす
})

円を描く

arc 構文

arc(x, y, radius, startAngle, endAngle, anticlockwise);

引数	内容
x	円の中心の x 座標
y	円の中心の y 座標
radius	半径
startAngle	円の開始角度
endAngle	円の終了角度
anticlockwise(true or false)	trueで時計回り、falseで反時計回り。デフォルトはfalse

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <title>sample</title>
</head>
<body>
  <canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

style.css

#myCanvas {
  border: 1px solid black;
}

script.js

window.addEventListener('load', function(){
  const cs = document.getElementById('myCanvas'),
        ctx = cs.getContext('2d');

  ctx.beginPath();
  ctx.arc(100, 50, 30, 0, 2 * Math.PI); // (100, 50)の位置に半径30pxの円
  ctx.closePath();
  // ctx.fill(); // フィルを塗りつぶす
})

四角形を描く

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <title>sample</title>
</head>
<body>
  <canvas id="myCanvas" width="300" height="200"></canvas>
</body>
</html>

style.css

#myCanvas {
  border: 1px solid black;
}

script.js

window.addEventListener('load', function(){
  const cs = document.getElementById('myCanvas'),
        ctx = cs.getContext('2d');

  ctx.beginPath();
  ctx.moveTo(50, 50);
  ctx.lineTo(100, 50);
  ctx.lineTo(100, 100);
  ctx.lineTo(50, 100);
  ctx.closePath();
  ctx.stroke();
  // ctx.fill(); // フィルを塗りつぶす
})