HTML 5 canvas globalCompositeOperation 属性

本文介绍如何利用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:在源图像外显示目标图像。只有源图像外的目标图像部分会被显示。源图像是透明的

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值