Canvas(五) 曲线的绘制

曲线的绘制 arc

绘制圆弧

• arc

context.arc(
  centerx, //圆心的x坐标
  centery, //圆心的y坐标
  radius,
  startingAngle,
  endingAngle,
  (anticlockwise = false) //顺时针还是逆时针
)

圆弧 demo

var canvas = document.getElementById('canvas')
canvas.width = 800
canvas.height = 800
var context = canvas.getContext('2d')
context.lineWidth = 10
context.beginPath()
context.arc(100, 100, 50, 0, Math.PI / 2, true)
context.strokeStyle = '#0f0'
context.stroke()
context.beginPath()
context.arc(100, 100, 50, 0, Math.PI / 2, false)
context.strokeStyle = '#444'
context.stroke()

画一个圆角矩形

window.onload = function () {
  var canvas = document.getElementById('canvas')
  canvas.width = 800
  canvas.height = 800
  var context = canvas.getContext('2d')
  drawRoundRect(context, 100, 100, 600, 500, 50)
}
function drawRoundRect(cxt, x, y, width, height, radius) {
  cxt.save()
  cxt.translate(x, y)
  pathRoundRext(cxt, width, height, radius)
  cxt.strokeStyle = 'black'
  cxt.stroke()
  cxt.restore()
}
function pathRoundRext(cxt, width, height, radius) {
  cxt.beginPath()
  cxt.arc(width - radius, height - radius, radius, 0, Math.PI / 2)
  cxt.lineTo(radius.height)
  cxt.arc(radius, height - radius, radius, Math.PI / 2, Math.PI)
  cxt.lineTo(0, radius)
  cxt.arc(radius, radius, radius, Math.PI, (Math.PI * 3) / 2)
  cxt.lineTo(width - radius, 0)
  cxt.arc(width - radius, radius, radius, (Math.PI * 3) / 2, Math.PI * 2)
  cxt.closePath()
}

曲线绘制 arcTo

context.arcTo(x1, y1, x2, y2, radius)

• arcTo 绘制圆弧 它绘制的是两条相切的点开始绘制图形

window.onload = function () {
  var canvas = document.getElementById('canvas')
  canvas.width = 800
  canvas.height = 800
  var context = canvas.getContext('2d')
  //arcTo
  context.beginPath()
  context.moveTo(150, 150)
  context.arcTo(650, 150, 650, 650, 300)
  context.lineWidth = 6
  context.strokeStyle = 'red'
  context.stroke()
}