Canvas(八) Canvas 图形裁剪clip和路径方向和剪纸效果

剪辑区域

• context.clip() 剪辑区域

window.onload = function () {
  var canvas = document.getElementById('canvas')
  canvas.width = 800
  canvas.height = 800
  var context = canvas.getContext('2d')
  //把整个图形绘制成黑色
  context.beginPath()
  context.fillStyle = 'black'
  context.fillRect(0, 0, canvas.width, canvas.height)
  //绘制结束
  context.beiginPath()
  context.arc(400, 400, 150, 0, Math.PI * 2)
  context.fillStyle = '#fff'
  context.fill()
  context.clip() //裁剪.改变绘制图布

  context.font = 'bold 150px Arial'
  context.textAlign = 'center'
  context.textBaseline = 'middle'
  context.fillStyle = '#058'
  context.fillText('CANVAS', canvas.width / 2, canvas.height / 2)
}

非零环绕原则 圆环一大一小 剪纸效果

window.onload = function () {
  var canvas = document.getElementById('canvas')
  canvas.width = 800
  canvas.height = 800
  var context = canvas.getContext('2d')
  //把整个图形绘制成黑色
  context.beginPath()
  context.arc(400, 400, 300, 0, Math.PI * 2, false)
  context.arc(400, 400, 150, 0, Math.PI * 2, true)
  context.closePath()
  context.fillStyle = '#058'
  context.shadowColor = 'gray'
  context.shadowOffsetX = 10
  context.shadowoffsetY = 10
  context.shadowBlur = 10
  context.fill()
}