返回顶部
首页 > 资讯 > 前端开发 > 其他 >html5 遮罩 有什么用
  • 906
分享到

html5 遮罩 有什么用

遮罩html5 2023-05-14 22:05:18 906人浏览 安东尼
摘要

本教程操作环境:windows10系统、HTML5版、DELL G3电脑html5 遮罩 有什么用?html5游戏引擎-遮罩——矩形遮罩-两个都显示 & 显示对象遮罩-只显示遮罩物,被遮罩物类似切除遮罩遮罩的作用是指定一个显示对象的

html5 遮罩 有什么用

教程操作环境:windows10系统、HTML5版、DELL G3电脑

html5 遮罩 有什么用?

html5游戏引擎-遮罩——矩形遮罩-两个都显示 & 显示对象遮罩-只显示遮罩物,被遮罩物类似切除

遮罩

遮罩的作用是指定一个显示对象的可见区域,所有显示对象都具备遮罩功能。

矩形遮罩

矩形遮罩,即显示对象的可见区域是方形显示区域而非不规则显示区域。

用法为:将一个矩形对象赋值给显示对象的 mask 属性。

shp.mask = new egret.Rectangle(20,20,30,50);

如果 rect 发生变化,需要重新将 rect 赋值给 shp.mask

下面示例中绘制了两个 Shape 对象,对其中一个 Shape 使用矩形遮罩,另外一个 Shape 当做参考。代码如下:

class Test extends egret.DisplayObjectContainer{
    public constructor()
    {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
    }
    private onAddToStage(event:egret.Event)
    {
        var shp:egret.Shape = new egret.Shape();
        shp.graphics.beginFill( 0xff0000 );
        shp.graphics.drawRect( 0,0,100,100);
        shp.graphics.endFill();
        this.addChild( shp );
        var shp2:egret.Shape = new egret.Shape();
        shp2.graphics.beginFill( 0x00ff00 );
        shp2.graphics.drawCircle( 0,0, 20);
        shp2.graphics.endFill();
        this.addChild( shp2 );
        shp2.x = 20;
        shp2.y = 20;
    }}

现在对 shp 添加遮罩,具体代码如下:

var rect:egret.Rectangle = new egret.Rectangle(20,20,30,50);  shp.mask = rect;

可以看到,红色的正方形添加了遮罩后只显示了(20,20,30,50)这部分的图像。而未添加遮罩的绿色圆形依然显示完整。

显示对象遮罩

显示对象遮罩,即显示对象的可见区域由另一个显示对象确定,可实现不规则遮罩。

用法为:将被遮罩显示对象的 mask 属性设置为遮罩对象:

//将maskSprite设置为mySprite的遮罩
mySprite.mask = maskSprite;

被遮罩的显示对象的显示区域,在用作遮罩的显示对象的全部不透明区域之内。例如,下面的代码创建一个包含 100 x 100 像素的红色正方形的 Shape 实例和一个包含半径为 25 个像素的蓝色圆的 Sprite 实例,它被设置为正方形的遮罩。正方形的显示区域,是由圆的不透明区域覆盖的那一部分。

//画一个红色的正方形
 var square:egret.Shape = new egret.Shape();
 square.graphics.beginFill(0xff0000);
 square.graphics.drawRect(0,0,100,100);
 square.graphics.endFill();
 this.addChild(square);//画一个蓝色的圆形var circle:egret.Shape = new egret.Shape();circle.graphics.beginFill(0x0000ff);circle.graphics.drawCircle(25,25,25);circle.graphics.endFill();this.addChild(circle);square.mask = circle;

用作遮罩的显示对象可设置动画、动态调整大小。遮罩显示对象不一定需要添加到显示列表中。但是,如果希望在缩放舞台时也缩放遮罩对象,或者如果希望支持用户与遮罩对象的交互(如调整大小),则必须将遮罩对象添加到显示列表中。

通过将 mask 属性设置为 null 可以删除遮罩:

mySprite.mask = null;

不能使用一个遮罩对象来遮罩另一个遮罩对象。

显示对象作为遮罩,无需像矩形遮罩那样重复赋值 mask,但是 mask 必须是显示列表里的元素。

推荐学习:《HTML5视频教程》

以上就是html5 遮罩 有什么用的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: html5 遮罩 有什么用

本文链接: https://lsjlt.com/news/206868.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • html5 遮罩 有什么用
    本教程操作环境:Windows10系统、HTML5版、DELL G3电脑html5 遮罩 有什么用?HTML5游戏引擎-遮罩——矩形遮罩-两个都显示 & 显示对象遮罩-只显示遮罩物,被遮罩物类似切除遮罩遮罩的作用是指定一个显示对象的...
    99+
    2023-05-14
    遮罩 html5
  • html5遮罩的作用是什么
    今天小编给大家分享一下html5遮罩的作用是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。html5遮罩的作用是指定一个...
    99+
    2023-07-05
  • CSS3中mask遮罩怎么用
    这篇文章主要介绍了CSS3中mask遮罩怎么用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。css的mask属性允许使用者通过部分或者完全隐...
    99+
    2024-04-02
  • HTML5怎么实现动态文字遮罩背景特效
    这篇文章主要介绍“HTML5怎么实现动态文字遮罩背景特效”,在日常操作中,相信很多人在HTML5怎么实现动态文字遮罩背景特效问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”HT...
    99+
    2024-04-02
  • vue遮罩和ref的使用方法是什么
    这篇文章主要讲解了“vue遮罩和ref的使用方法是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue遮罩和ref的使用方法是什么”吧!创建conform.vue,其内容如下:<t...
    99+
    2023-07-05
  • windows中edius怎么做遮罩
    本篇内容介绍了“windows中edius怎么做遮罩”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!edius做遮罩的方法在va轨道上导添加视...
    99+
    2023-07-04
  • pyqt5蒙版遮罩mask,setmask的使用
    目录1.理解2.例子1.理解 mask()和setmask()一般是在pyqt绘图时常见,而且在显示不规则图形时更是常见。 参考书籍上说: setMask()函数的作用是为调用它的...
    99+
    2024-04-02
  • Qt怎么使用QDialog实现界面遮罩
    这篇文章主要介绍了Qt怎么使用QDialog实现界面遮罩的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Qt怎么使用QDialog实现界面遮罩文章都会有所收获,下面我们一起来看看吧。先来看下效果:根据需求功能,我...
    99+
    2023-06-30
  • 怎么用js+css实现div遮罩层效果
    本篇内容主要讲解“怎么用js+css实现div遮罩层效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用js+css实现div遮罩层效果”吧!<sty...
    99+
    2024-04-02
  • 怎样用代码显示HTML5手机端上弹出遮罩菜单特效
    怎样用代码显示HTML5手机端上弹出遮罩菜单特效,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。 效果图如下所示:...
    99+
    2024-04-02
  • 怎么用jquery+CSS实现悬浮登录框遮罩
    这篇文章主要介绍了怎么用jquery+CSS实现悬浮登录框遮罩的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么用jquery+CSS实现悬浮登录框遮罩文章都会有所收获,下面我们一起来看看吧。先上效果图,阴影部...
    99+
    2023-06-29
  • 使用css3怎么给背景图片加颜色遮罩
    这篇文章给大家介绍使用css3怎么给背景图片加颜色遮罩,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。方法一:通过定位叠加(注意层级)<div class="wrap1">&nb...
    99+
    2023-06-08
  • pyqt5中蒙版遮罩mask,setmask的使用方法
    这篇文章主要介绍pyqt5中蒙版遮罩mask,setmask的使用方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1.理解mask()和setmask()一般是在pyqt绘图时常见,而且在显示不规则图形时更是常见。...
    99+
    2023-06-15
  • css3怎么给背景图片加颜色遮罩
    这篇“css3怎么给背景图片加颜色遮罩”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“css...
    99+
    2024-04-02
  • 小程序遮罩穿透问题怎么解决
    这篇文章主要讲解了“小程序遮罩穿透问题怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“小程序遮罩穿透问题怎么解决”吧!许多企业在做小程序项目会遇到一个项目,就是点一个按钮出现一个蒙层,...
    99+
    2023-06-26
  • 微信小程序怎么实现遮罩功能
    本文小编为大家详细介绍“微信小程序怎么实现遮罩功能  ”,内容详细,步骤清晰,细节处理妥当,希望这篇“微信小程序怎么实现遮罩功能  ”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。微信小程序实现...
    99+
    2023-06-26
  • Qt使用QDialog实现界面遮罩的示例(蒙版)
    写应用程序的过程中,弹窗是个避免不了的功能,显示中,假设弹窗背景色和主窗口背景色相差不多,甚至是一样的时候,就会存在一个比较严重的人机交互和UI显示的问题,找到弹窗的边界是比较麻烦的...
    99+
    2024-04-02
  • BUG解决:微信小程序调用vantweapp遮罩层popup 更改show后没反应,弹框/遮罩层不隐藏,show失效
    一、bug复现: 引入popup组件,时间选择组件 json> "usingComponents": { "van-datetime-picker": "@vant/weapp/datetime-picker/index...
    99+
    2023-09-22
    微信小程序 小程序 vant vant webapp 日期选择 Powered by 金山文档
  • layui: layer.open加载窗体时出现遮罩层怎么办
    小编给大家分享一下layui: layer.open加载窗体时出现遮罩层怎么办,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!如下所示:把窗体方法独立出来放在layer.use([],fun...
    99+
    2024-04-02
  • 怎么在css中实现遮罩全屏居中对齐
    这篇文章将为大家详细讲解有关怎么在css中实现遮罩全屏居中对齐,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。具体代码如下所示:<style>#toastLoaderFullScr...
    99+
    2023-06-08
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作