Canvas Preliminary

Come in contact with Canvas, the following is its basic usage

<canvas id="canvas"></canvas>
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d')
context.moveTo(x,y)
context.lineTo(x,y)
context.arc(cx,cy,r,sAng,eAng,anticlock=false)

context.beginPath()
context.closePath()

context.lineWidth
context.strokeStyle
context.fillStyle

context.stroke() 线绘制
context.fill() 填充色块

context.clearRect(x,y,width,height) 刷新
context.width
context.canvas

canvas.width
canvas.height
canvas.getContext('2d')

setInterval(function() {
          render();
          update();
     },50
)

Using the above method, you can draw some interesting groups.