canvas高级内容

1.阴影

  • context.shadowColor——阴影颜色
  • context.shadowOffsetX——X轴方向偏移量
  • context.shadowOffsetY——Y轴方向偏移量
  • context.shadowBlur——失焦距离

2.global

  • globalAlpha——设置全局透明度
  • globalCompositeOperation——图形与图形之间产生遮挡时怎么处理
    • source-over——源覆盖,即后面的覆盖前面的
    • source-atop
    • source-in
    • source-out
    • destination-over
    • destination-atop
    • destination-in
    • destination-out
    • lighter
    • copy
    • xor

3.剪辑区域

  • context.clip()——可制作探照灯效果

4.非零环绕原则——创造镂空剪纸效果,在规划路径的时候要注意路径方向

5.isPointInPath()——配合其他js事件可以实现丰富的canvas交互效果

  • context.isPointInPath(x,y)——判断点(x,y)是否在canvas的某个路径中

猜你喜欢

转载自blog.csdn.net/DreamFJ/article/details/81504478