覚書 canvasに円を描く関数

TypeScriptを使って書きました。

わざわざDrawCircleの型を定義しているのは、drawCircle関数からできるだけ型の情報をなくして読むときのノイズを減らすためです。

type Circle = {
  x: number
  y: number
  w: number
  lineColor?: string
  lineWidth?: number
  fillColor?: string
}
type DrawCircle = (ctx: CanvasRenderingContext2D, circle: Circle) => void

export const drawCircle: DrawCircle = (
  ctx,
  { x, y, w, lineColor = 'black', lineWidth = 1, fillColor }
): void => {
  ctx.beginPath()

  ctx.arc(x, y, w, 0, 2 * Math.PI)

  ctx.strokeStyle = lineColor
  ctx.lineWidth = lineWidth

  ctx.stroke()

  if (fillColor !== undefined) {
    ctx.fillStyle = fillColor
    ctx.fill()
  }
}

使い方

const ctx = canvas.getContext('2d')

if (ctx !== null) {
  drawCircle(ctx, {
    x: 200,
    y: 400,
    w: 20,
    lineColor: 'red',
    fillColor: 'lightYellow',
  })
}

TypeScript

Posted by たみぼうず