Draw Several Shapes 様々な図形を描く

draw several shapes only with HTML5 - Canvas element. No need any image file.
Canvas element has many methods for drawing shapes such as line, shape, arc, etc. We can describe many kind of shapes, just using with these methods.

様々な図形をCanvasのみで描画しています。画像ファイルは利用していません。
Canvasでは線、四角、円など様々な図形を描くメソッドが準備されています。それらを利用する事で様々な図形を作成しまています。


Lines 線
  • context.beginPath()
  • context.moveTo(x, y)
  • context.lineTo(x, y)
  • context.stroke()
    • Square(line) 四角
  • context.strokeRect(x, y, width, height)
    • Square(fill) 四角
  • context.fillRect(x, y, width, height)
  • context.clearRect(x, y, width, height)
    • Circle 円
    Half Circle 半円
    BarChart 棒
    LineChart 折線
    CircularChart 円
    VennDiagram ベン図