circle

by aio350

HTML

<canvas width="300" height="300" style="border: 1px dotted #222"></canvas>

CSS

body {
  margin: 0;
  height: 100vh;
  background: radial-gradient(circle, skyblue, steelblue);
  display: flex;
  justify-content: center;
  align-items: center;
}

JavaScript

const canvas = document.querySelector('canvas')
const $ = canvas.getContext('2d')

$.lineWidth = 3
$.strokeStyle = 'rgba(0,0,0,.4)'
// нарисовать круг
$.arc(150, 150, 125, 0, Math.PI * .5)
$.fillStyle = 'rgba(255,0,0,.6)'
$.fill()
$.stroke()

$.beginPath()
$.arc(150, 150, 125, Math.PI, Math.PI * 1.5)
$.fill()
$.stroke()

$.beginPath()
$.arc(150, 150, 125, Math.PI * .5, Math.PI)
$.fillStyle = 'rgba(0,255,0,.6)'
$.fill()
$.stroke()

$.beginPath()
$.arc(150, 150, 125, Math.PI * 1.5, Math.PI * 2)
$.fill()
$.stroke()

$.beginPath()
$.arc(150, 150, 75, Math.PI * .25, Math.PI * .75)
$.fill()
$.lineWidth = 2
$.stroke()

$.beginPath()
$.arc(150, 150, 75, Math.PI * 1.25, Math.PI * 1.75)
$.fill()
$.stroke()

$.beginPath()
$.arc(150, 150, 75, Math.PI * 1.75, Math.PI * 0.25)
$.fillStyle = 'rgba(255,0,0,.6)'
$.fill()
$.stroke()

$.beginPath()
$.arc(150, 150, 75, Math.PI * 0.75, Math.PI * 1.25)
$.fill()
$.stroke()

$.beginPath()
$.arc(150, 150, 40, 0, Math.PI * 2)
$.fill()
$.lineWidth = 1
$.stroke()

$.beginPath()
$.arc(150, 150, 20, 0, Math.PI * 2)
$.fillStyle = 'rgba(0,255,0,.6)'
$.fill()
$.stroke()