タグ: context2d

使用するクラス

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

サンプル

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