HTML 5 canvas globalCompositeOperation 属性

最新推荐文章于 2025-07-22 17:30:26 发布

原创最新推荐文章于 2025-07-22 17:30:26 发布 · 998 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #canvas

HTML5 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何利用HTML5 Canvas的globalCompositeOperation属性实现图片的局部显示效果。通过定义两个canvas，先设置source-over模式填充整个区域，再用destination-out模式绘制圆形区域，最终达到仅显示指定范围内的图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述

　　如上图所示，我们该如何实现这样的效果呢？只显示指定区域的图片。
　　是的，就是使用canvas的globalCompositeOperation属性。
　　

1.首先我们定义一个和图片大小一样的canvas，并将其contex的globalCompositeOperation属性设置为source-over。

   var maskContext = canvas.getContext('2d');
    maskContext.globalCompositeOperation='source-over';
    maskContext.fillRect(0,0,maskWidth,maskHeight);

2.然后再定义一个圆形的绘图。

    maskContext.globalCompositeOperation='destination-out';
    maskContext.beginPath();
    maskContext.arc(maskX,maskY,MASK_R,0,Math.PI*2,true);
    maskContext.fill();

　　globalCompositeOperation 属性设置如何将一个源（新的）图像绘制到目标（已有）的图像上。
　源图像 = 您打算放置到画布上的绘图。
　目标图像 = 您已经放置在画布上的绘图。
　其中：
source-over：在目标图像上显示源图像。
destination-out：在源图像外显示目标图像。只有源图像外的目标图像部分会被显示。源图像是透明的。