【javascript】canvasに丸や四角や文字などを描いてみよう

使用するクラス

HTMLCanvasElement

関数

getContext(contextType)

CanvasRenderingContext2D

関数

beginPath()
arc(x, y, radius, startAngle, endAngle, anticlockwise)
stroke()
fillRect(x, y, width, height)
strokeRect(x, y, width, height)
fillText(text, x, y)
strokeText(text, x, y)

プロパティ

fillStyle
font

描画方法

アニメーションの描画方法については、【javascript】canvasでアニメーションを作ろうをご覧ください。

丸を描画する

丸を描画するには横にx離れた位置、縦にy離れた位置を起点とし、半径radiusの円のうち、描画起点となる角度startAngleから描画終了となる角度endAngleまでを指定する事で描画する。

function drawOval(){
  let canvas = document.querySelector('#oval-canvas41');
  let context = canvas.getContext('2d');
  context.beginPath();
  let x = 100;
  let y = 100;
  let radius = 50;
  let startAngle = 0;
  let endAngle = 2 * Math.PI;
  context.arc(x, y, radius, startAngle, endAngle);
  context.stroke();
}
window.addEventListener("load", function(){
  drawOval();
});

四角を描画する

四角を描画するには横にx離れた位置、縦にy離れた位置を起点とし、四角形の横幅(width)と縦幅(height)を指定する事で描画する。色を変えるにはfillStyleプロパティにカラーコードを設定する。

function drawRect(){
  let canvas = document.querySelector('#rect-canvas41');
  let context = canvas.getContext('2d');
  let x = 50;
  let y = 50;
  let width = 100;
  let height = 50;
  context.strokeRect(x, y, width, height);
  context.fillStyle = 'rgb(255, 0, 0)';
  x = 160;
  y = 30;
  width = 50;
  context.fillRect(x, y, width, height);
}
window.addEventListener('load', function(){
  drawRect();
});

文字を描画する

文字を描画するには横にx離れた位置、縦にy離れた位置を起点にtextで設定された文章を描画する。描画する文章のフォントを変更するにはfontプロパティを設定する。

function drawText(){
  let canvas = document.querySelector('#text-canvas41');
  let context = canvas.getContext('2d');
  context.font = '24px Impact';
  let text = 'Welcome to my blog!';
  let x = 30;
  let y = 60;
  context.strokeText(text, x, y);
  x = 60;
  y = 100;
  context.fillStyle = 'rgb(0, 0, 255)';
  context.fillText(text, x, y);
}
window.addEventListener('load', function(){
  drawText();
});

サンプル

入力値をもとに四角形を描画するサンプル

x座標:

y座標:

横幅:

縦幅

色:塗りつぶす