最近做的一个前端项目需要支持多终端,网页版需要使用html5中canvas画布对象对一组数据进行渲染还原,但是在实际开发的过程中遇到了一个问题,canvas中没有mask(遮罩)层的概念,所以一些效果实现不了,最后翻看文档的时候发现可以通过Context对象的globalCompositeOperation属性或者Context的clip()裁剪路径方法实现遮罩的效果。
globalCompositeOperation属性介绍
蓝色
表示先绘制的图形、红色
表示后绘制的图形
浏览器支持: Internet Explorer 9
、Firefox
、Opera
、Chrome
、Safari
支持globalCompositeOperation 属性
通过Context的globalCompositeOperation