Canvas

基本API

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

Canvas的绘图是基于一种状态，之后调用具体函数进行具体绘制

Draw a line

// 状态设置 context.moveTo(100, 100) context.lineTo(700, 700)

// 填充 context.fillStyle = "rgb(2,100,30)"; context.fill();

// 绘制 context.stroke() context.lineWidth = 5; context.strokeStyle = "#005588"; context.stroke();

// 开始新的绘制，将用这两个API context.beginPath() context.closePath()

第一小节 ~Draw

绘制API context.moveTo(x, y) context.lineTo(x, y)

context.beginPath() context.closePath()

状态API conttext.lineWidth context.strokeStyle context.fillStyle

context.stroke() context.fill()

第二小节 ~绘制圆

Draw an arc

context.arc( centerx, centery, radius, startingAngle, endingAngle, anticlockwise = false )