前端基础_组合多个图形

news2024/11/14 23:59:43

组合多个图形

在前面的实例中,我们看到使用Canvas API可以将一个图形重叠绘制在另一个图形上面,但图形中能够被看到的部分完全取决于以哪种方式进行组合,这时需要使用到Canvas API的图形组合技术。在HTML5中,只要用图形上下文对象的globalCompositeOperation属性就能自己决定图形的组合方式,使用方法如下。

context.globalCompositeOperation = type

type的值必须是下面几种字符串之一。

下面将以图形组合的方式,来说明type值的字符串表现形式。

在下面的图形中,黑色方块是先绘制的,即“已有的canvas内容”,灰色圆形是后面绘制的,即“新图形”。

 source-over
这是默认设置,表示新图形会覆盖在原有图形之上。效果如图17.23所示。
 destination-over
表示会在原有图形之下绘制新图形。效果如图17.24所示。
 source-in
新图形会仅仅出现与原有图形重叠的部分,其他区域都变成透明的。
 destination-in

原有图形中与新图形重叠的部分会被保留,其他区域都变成透明的。效果如图17.26所示。

 source-out

只有新图形中与原有内容不重叠的部分会被绘制出来。效果如图17.27所示。
 destination-out
原有图形中与新图形不重叠的部分会被保留。效果如图17.28所示。
 source-atop

只绘制新图形中与原有图形重叠的部分和未被重叠覆盖的原有图形,新图形的其他部分变成透明。
 destination-atop

只绘制原有图形中被新图形重叠覆盖的部分与新图形的其他部分,原有图形中的其他部分变成透明,不绘制新图形中与原有图形相重叠的部分。效果如图17.30所示。
 lighter
两图形中重叠部分作加色处理。
 darker
两图形中重叠的部分作减色处理。效果如图17.32所示。
 xor
重叠的部分会变成透明。效果如图17.33所示。
 copy
只有新图形会被保留,其他都被清除掉。

https://www.bilibili.com/video/BV1kR4y167Cp/?spm_id_from=333.999.0.0&vd_source=a7816e3b2a3a67ac39dc87f6bf92421cicon-default.png?t=M85Bhttps://www.bilibili.com/video/BV1kR4y167Cp/?spm_id_from=333.999.0.0&vd_source=a7816e3b2a3a67ac39dc87f6bf92421c

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/108464.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

模数转换器(ADC)

目录 一、简介: 二、主要特征 三、校准(CLB) 四、ADC时钟 五、ADCON开关 六、规则组和注入组 七、转换模式 八、注入通道管理 九、可编程的采样时间 十、外部触发 十一、温度传感器和内部参考电压 一、简介: 12位ADC是…

CSS -- 使用纯CSS实现旋转木马相册的效果

如果对3D转换不熟悉可以参考&#xff1a;CSS – CSS3中3D转换相关属性讲解&#xff08;translate3d&#xff0c;rotate3d&#xff0c;perspective&#xff0c;transform-style&#xff09; 如果对动画不熟悉可以参考&#xff1a;CSS – CSS3基础动画讲解 旋转木马图片相册 <…

centos 7安装mysql

一.安装之前检测系统是否有自带的MySQL(若是没有安装直接忽略该步骤) rpm -qa | grep mysql #检查是否安装过MySQL rpm -qa | grep mariadb #检查是否存在 mariadb 数据库&#xff08;内置的MySQL数据库&#xff09;&#xff0c;有则强制删除 rpm -e --nodeps mariadb-libs-…

信而泰BGP Flow Spec防攻击测试解决方案

随着互联网行业的迅猛发展&#xff0c;越来越多的业务都从线下走到了线上。互联网在给大家生活带来便利的同时也面临着防护自身安全的各种挑战。 DoS/DDoS攻击是对网络安全的重大威胁&#xff0c;攻击者通过多个控制端控制成千上万的攻击设备对同一个目的地址、网段或服务器同…

【触摸屏功能测试】昆仑通态MCGS——物联网功能测试

测试触摸屏&#xff1a; 型号&#xff1a;TPC7022Ni 测试内容&#xff1a;物联网产品设备的无线通信和远程调试功能 物联网 1、功能概述 物联网产品设备可通过无线通讯的方式&#xff0c;进行远程调试和操作。物联网产品设备支持以下功能&#xff1a; l 4G和WiFi通信 l 远…

m基于kmeans和SVM的网络入侵数据分类算法matlab仿真

目录 1.算法描述 2.仿真效果预览 3.MATLAB核心程序 4.完整MATLAB 1.算法描述 首先计算整个数据集合的平均值点&#xff0c;作为第一个初始聚类中心C1&#xff1b; 然后分别计算所有对象到C1的欧式距离d&#xff0c;并且计算每个对象在半径R的范围内包含的对象个数W。 此时计…

非零基础自学Golang 第17章 HTTP编程(上) 17.2 HTTP客户端 17.2.3 发起GET请求

非零基础自学Golang 文章目录非零基础自学Golang第17章 HTTP编程(上)17.2 HTTP客户端17.2.3 发起GET请求第17章 HTTP编程(上) 17.2 HTTP客户端 17.2.3 发起GET请求 从现在开始我们将会学习如何使用Go语言模拟浏览器发起HTTP请求。 发起请求前需要创建一个请求对象&#xff…

WINDOWS下安装ORACLE客户端报错:无法访问临时位置

WINDOWS2016&#xff08;虚拟机&#xff09;安装oracle11g碰到“无法访问临时位置”的问题&#xff0c;详细信息如下&#xff1a; INS-30131] 执行安装程序验证所需的初始设置失败。 原因 - 无法访问临时位置。 操作 - 请确保当前用户具有访问临时位置所需的权限。 附加信息: …

【DETR目标检测】关键词:Decoder。Encoder。query向量。注意力机制。

声明:仅学习使用~ 目录 1、目标检测的基本思想2、整体网络架构3、位置信息初始化query向量4、注意力机制的作用方法5、训练过程的策略1、目标检测的基本思想 2015年,faster-rcnn; 2016年,YOLO; NMS:非极大值抑制; 2、整体网络架构 backbone 即先通过CNN 拿到每个pat…

Transformers18~ Diffusion

还是Transformers,来自 UC 伯克利的 William Peebles 以及纽约大学的谢赛宁撰文揭秘扩散模型中架构选择的意义&#xff0c;并为未来的生成模型研究提供经验基线。 近几年&#xff0c;在 Transformer 的推动下&#xff0c;机器学习正在经历复兴。过去五年中&#xff0c;用于自然…

【概述】请求报文在网络各层中的具体传输

请求报文在网络各层中的具体传输电脑中之间的通信&#xff0c;可以看成为两个应用进程之间的通信&#xff1b;一个请求从客户端到服务器端&#xff0c;通常需要经过三个阶段&#xff1a; 客户端路由转发阶段服务器端 客户端请求服务端 请求在客户端中每一层的具体传输数据 应…

LeetCode 322 周赛

2490. 回环句 句子 是由单个空格分隔的一组单词&#xff0c;且不含前导或尾随空格。 例如&#xff0c;"Hello World"、"HELLO"、"hello world hello world" 都是符合要求的句子。 单词 仅 由大写和小写英文字母组成。且大写和小写字母会视作不…

【Call for papers】2023年CCF-A类会议截稿日期(实时更新)

会议简称会议名称类别截稿日期链接S&P-2023IEEE Symposium on Security and Privacy网络与信息安全2022年12月2日Call for papersUSENIX ATC-2023USENIX Annul Technical Conference计算机体系结构/并行与分布计算/存储系统2023年1月12日Call for papersIJCAI-2023Internat…

H5后台读写CAD文件

说明 后台提供mxconvert.js程序&#xff0c;该程序使用JS编程&#xff0c;可以在后台实现读写CAD文件、读取CAD图纸数据等操作。 如何使用mxconvert.js转CAD图纸到梦想格式 1.Windows调用&#xff0c;进入 Bin\Release目录&#xff0c;命令行调用 node.exe mxconvert.js 1.d…

【推荐】动力锂电池及BMS系统介绍资料合集

锂动力电池是20世纪开发成功的新型高能电池。这种电池的负极是金属锂&#xff0c;正极用MnO2&#xff0c;SOCL2&#xff0c;(CFx)n等。70年代进入实用化。因其具有能量高、电池电压高、工作温度范围宽、贮存寿命长等优点&#xff0c;已广泛应用于军事和民用小型电器中&#xff…

部署AI平台 宝马集团正在掀起新一轮数字化改革浪潮

数字化转型作为当代企业创新求变的重要突破口&#xff0c;成为各行各业推进持续发展的大热趋势。但在企业的在数字化征程中&#xff0c;却暗藏多重陷阱&#xff0c;数据孤岛、标准不一、质量太差、治理滞后、安全隐患等挑战&#xff0c;如影随形。 近日&#xff0c;宝马集团宣布…

125页6万字智慧城市系统及智慧城市运营中心建设技术方案

目 录 1. 智慧城市系统概述 1.1 前言 1.2 什么是智慧城市&#xff1f; 1.3 智慧城市的总体目标 1.4 智慧城市如何建设 1.5 智慧城市组成和架构 1.6 智慧城市总体功能 1.6.1 城市运营中心门户 1.6.2 城市事件管理服务 1.6.3 城市运维管理服务 1.6.4 数据挖掘 1.6.4…

【Unity大气散射】GAMES104:3A中如何实现大气散射

写在前面 前两天学习并整理的大气散射基础知识&#xff1a;【Unity大气渲染】关于单次大气散射的理论知识&#xff0c;收获了很多&#xff0c;但不得不承认的是&#xff0c;这其实已经是最早的、90年代的非常古老的方法了&#xff0c;后来也出现了一些优化性的计算思路和方法。…

解决金仓数据库KingbaseES V8R3 由于修改系统时间导致sys_rman备份故障的问题

案例说明&#xff1a; 此案例&#xff0c;为复现“current time may be rewound”错误。对于数据库环境&#xff0c;在使用前必须保证系统时间的正确性。如果数据库创建后&#xff0c;再将系统时间修改为创建数据库之前的时间&#xff0c;在运行过程中将有可能导致新老事务判断…

Beego框架项目搭建步骤

1、执行 go env 指令&#xff0c;将输出当前 Go 开发包的环境变量状态。 GOARCH 表示目标处理器架构。 GOBIN 表示编译器和链接器的安装位置。 GOOS 表示目标操作系统。 GOPATH 表示当前工作目录。 GOROOT 表示 Go 开发包的安装目录。 2、安装beego 输入 go get github.com/as…