Canvas(七) Canvas阴影和图形相交

阴影

• context.shadowColor 阴影的颜色
• context.shadowOffsetX X 轴位移
• context.shadowOffsetY Y 轴位移
• context.shadowBlur 模糊值

window.onload = function () {
  var canvas = document.getElementById('canvas')
  canvas.width = 800
  canvas.height = 800
  var context = canvas.getContext('2d')
  context.save() //保存
  context.fillStyle = 'red'
  context.shadowColor = 'gray'
  context.shadowOffsetX = 20
  context.shadowOffsetY = 20
  context.shadowBlur = 6
  context.fillRect(200, 200, 400, 400)
}

透明度与遮挡

• globalAlpha

• globalCompositeOperation

globalAlpha 透明度

• 默认值 1

context.globalAlpha = 1

globalCompositeOperation 重叠时候产生的效果

• 默认效果 source-over

• source-in 目标图形和源图形重叠且都不透明的部分才会被绘制

ctx.save()
ctx.translate(w / 2, h / 2)
ctx.fillStyle = 'red'
ctx.beginPath()
ctx.arc(-40, 20, 80, 0, Math.PI * 2, true)
ctx.closePath()
ctx.fill()
ctx.globalCompositeOperation = 'source-in'
ctx.fillStyle = 'orange'
ctx.beginPath()
ctx.arc(40, 20, 80, 0, Math.PI * 2, true)
ctx.closePath()
ctx.fill()
ctx.restore()

• source-out 目标图形和源图形不重叠的部分会被绘制

ctx.save()
ctx.translate(w / 2, h / 2)
ctx.fillStyle = 'red'
ctx.beginPath()
ctx.arc(-40, 20, 80, 0, Math.PI * 2, true)
ctx.closePath()
ctx.fill()
ctx.globalCompositeOperation = 'source-out'
ctx.fillStyle = 'orange'
ctx.beginPath()
ctx.arc(40, 20, 80, 0, Math.PI * 2, true)
ctx.closePath()
ctx.fill()
ctx.restore()

• source-atop 目标图形和源图形内容重叠的部分的目标图形会被绘制

• destination-over 目标图形和源图形内容后面的目标图形会被绘制

• destination-in 目标图形和源图形重叠的部分会被保留（源图形），其余显示为透明