canvas设置图形各种混合模式,类似photoshop效果

查看专栏目录
canvas实例应用100+专栏,提供canvas的基础知识,高级动画,相关应用扩展等信息。canvas作为html的一部分,是图像图标地图可视化的一个重要的基础,学好了canvas,在其他的一些应用上将会起到非常重要的帮助。
文章目录
- 示例效果图
- type列表
- 示例源代码(共115行)
- canvas基本属性
- canvas基础方法
canvas如何设置图形各种混合模式呢?通过context.globalCompositeOperation = type的方法来实现。这里面的type有很多种。请参考列表。
示例效果图

type列表
| type | 说明 |
|---|---|
| source-over | 绘制图形的默认混合方式,直接在现有图形的上方绘制,纯视觉覆盖 |
| source-in | 仅在和原Canvas图形重叠的位置绘制新图形,否则处理为透明。如果重叠位置是半透明颜色,则也处理为半透明。此效果类似遮罩,新内容为显示层,原内容是遮罩层,遮罩层无论张什么样子,都不显示。 |
| source-out | 和source-in相反,重叠的位置是透明的,不重叠的或者半透明的重叠区域反而显示新图形。同样,原内容无论性质如何,最终效果都不会出现。 |
| source-atop | 仅在新内容与原内容重叠的位置进行类似遮罩的绘制,如果是没有重叠的位置,则原封不动显示。这个和 source-in 区别在于source-in 就算与原内容不重叠,原内容也永远不会显示,但 source-atop 会保留。 |
| destination-over | destination-*系列和source-*系列的区别就是动作的主体是新内容还是原内容。source-*系列是新内容,而destination-*系列动作主体是元内容。例如这里的destination-over表示原内容在上方,也就是新内容在原内容的下方绘制。 |
| destination-in | 显示原内容和新内容重叠的部分。 |
| destination-out | 隐藏原内容和新内容重叠的部分。 |
| destination-atop | 原内容只显示和新内容重叠的部分,同时新内容在下方显示。 |
| lighter | 无论是哪种语言,哪种工具的混合模式,其实概念都类似的。如果这里的lighter等同于Adobe Photoshop中lighter color的话,则这个属性值可以理解为自然光混合效果。红绿蓝混合会成为白色。 |
| copy | 只显示新内容。 |
| xor | 互相重叠的区域是透明的。 |
| multiply | 正片叠底。顶层的像素与底层的对应像素相乘。结果是一幅更黑暗的图画。 |
| screen | 滤色。像素反转,相乘,然后再反转。最终得到更淡的图形(和multiply相反)。 |
| overlay | 叠加。multiply和screen组合效果。基础图层上暗的部分更暗,亮的部分更亮。 |
| darken | 变暗。保留原内容和新内容中最暗的像素。 |
| lighten | 变亮。保留原内容和新内容中最亮的像素。 |
| color-dodge | 颜色减淡。底部图层色值除以顶部图层的反相色值。 |
| color-burn | 颜色加深。底部图层的色值除以顶部图层色值,得到的结果再反相。 |
| hard-light | 强光。类似overlay,是multiply和screen组合效果。只不过底层和顶层位置交换下。 |
| soft-light | 柔光。hard-light的柔和版本。纯黑色或白色不会生成为纯黑色或白色。 |
| difference | 差异。顶层色值减去底层色值的绝对值。如果都是白色,则最后是黑色,因为值为0;什么时候是白色呢,例如RGB(255,0,0)和RGB(0,255,255),色值相减后绝对值是RGB(255,255,255)。 |
| exclusion | 排除。类似difference,不过对比度较低。 |
| hue | 色调。最终的颜色保留底层的亮度和色度,同时采用顶层的色调。 |
| saturation | 饱和度。最终的颜色保留底层的亮度和色调,同时采用顶层的色度。 |
| color | 色值。最终的颜色保留底层的亮度,同时采用顶层的色调和色度。 |
| luminosity | 亮度。最终的颜色保留底层的色调和色度,同时采用顶层的亮度。 |
示例源代码(共115行)
/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-02-04
*/
<template><div class="djs_container"><div class="top"><h3>canvas设置图形各种混合模式</h3><div>大剑师兰特, 还是大剑师兰特,gis-dajianshi</div><h4><el-button type="primary" size="mini" @click="draw('source-over')">source-over</el-button><el-button type="primary" size="mini" @click="draw('source-in')">source-in</el-button><el-button type="primary" size="mini" @click="draw('source-out')">source-out</el-button><el-button type="primary" size="mini" @click="draw('source-atop')">source-atop</el-button><el-button type="danger" size="mini" @click="draw('destination-over')">destination-over</el-button><el-button type="danger" size="mini" @click="draw('destination-in')">destination-in</el-button><el-button type="danger" size="mini" @click="draw('destination-out')">destination-out</el-button><el-button type="danger" size="mini" @click="draw('destination-atop')">destination-atop</el-button><el-button type="success" size="mini" @click="draw('lighter')">lighter</el-button><el-button type="success" size="mini" @click="draw('copy')">copy</el-button><el-button type="success" size="mini" @click="draw('xor')">xor</el-button><el-button type="success" size="mini" @click="draw('multiply')">multiply</el-button><el-button type="success" size="mini" @click="draw('screen')">screen</el-button><el-button type="success" size="mini" @click="draw('overlay')">overlay</el-button><el-button type="success" size="mini" @click="draw('darken')">darken</el-button><el-button type="success" size="mini" @click="draw('lighten')">lighten</el-button><el-button type="warning" size="mini" @click="draw('color-dodge')">color-dodge</el-button><el-button type="warning" size="mini" @click="draw('color-burn')">color-burn</el-button><el-button type="warning" size="mini" @click="draw('hard-light')">hard-light</el-button><el-button type="warning" size="mini" @click="draw('soft-light')">soft-light</el-button><el-button type="warning" size="mini" @click="draw('difference')">difference</el-button><el-button type="warning" size="mini" @click="draw('exclusion')">exclusion</el-button><el-button type="warning" size="mini" @click="draw('hue')">hue</el-button><el-button type="warning" size="mini" @click="draw('saturation')">saturation</el-button><el-button type="warning" size="mini" @click="draw('color')">color</el-button><el-button type="warning" size="mini" @click="draw('luminosity')">luminosity</el-button></h4></div><div class="dajianshi "><canvas id="dajianshi" ref="mycanvas" width="980" height="410"></canvas></div></div>
</template>
<script>export default {data() {return {ctx: null,canvas: null,imageUrl: require('../assets/bg.png'), }},mounted() {this.setCanvas()},methods: {clearCanvas() { this.ctx.clearRect(-180, -50, this.canvas.width, this.canvas.height);this.ctx.restore();},setCanvas() {this.canvas = document.getElementById('dajianshi');if (!this.canvas.getContext) return;this.ctx = this.canvas.getContext("2d");},draw(type) {this.clearCanvas();this.ctx.save();this.ctx.translate(300,50);const image = new Image();image.src = this.imageUrl;image.addEventListener("load", () => {this.ctx.drawImage(image, 0, 0, 400, 350); this.ctx.globalCompositeOperation = typethis.rect(this.ctx,100,90,200,150,'blue')});},rect(ctx,x,y,w,h,fillcolor){ctx.fillStyle=fillcolor;ctx.fillRect(x,y,w,h) },}}
</script>
<style scoped>.djs_container {width: 1000px;height: 680px;margin: 50px auto;border: 1px solid #222;position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: #222;color: #fff;}.dajianshi {margin: 5px auto 0;border: 1px solid #cde;width: 980px;height: 410px;}.top>>>.el-button{ margin-bottom: 8px;}
</style>
canvas基本属性
| 属性 | 属性 | 属性 |
|---|---|---|
| canvas | fillStyle | filter |
| font | globalAlpha | globalCompositeOperation |
| height | lineCap | lineDashOffset |
| lineJoin | lineWidth | miterLimit |
| shadowBlur | shadowColor | shadowOffsetX |
| shadowOffsetY | strokeStyle | textAlign |
| textBaseline | width |
canvas基础方法
| 方法 | 方法 | 方法 |
|---|---|---|
| arc() | arcTo() | addColorStop() |
| beginPath() | bezierCurveTo() | clearRect() |
| clip() | close() | closePath() |
| createImageData() | createLinearGradient() | createPattern() |
| createRadialGradient() | drawFocusIfNeeded() | drawImage() |
| ellipse() | fill() | fillRect() |
| fillText() | getImageData() | getLineDash() |
| isPointInPath() | isPointInStroke() | lineTo() |
| measureText() | moveTo() | putImageData() |
| quadraticCurveTo() | rect() | restore() |
| rotate() | save() | scale() |
| setLineDash() | setTransform() | stroke() |
| strokeRect() | strokeText() | transform() |
| translate() |
相关文章:
canvas设置图形各种混合模式,类似photoshop效果
查看专栏目录 canvas实例应用100专栏,提供canvas的基础知识,高级动画,相关应用扩展等信息。canvas作为html的一部分,是图像图标地图可视化的一个重要的基础,学好了canvas,在其他的一些应用上将会起到非常重…...
谷粒商城-P19
项目结构创建&提交到码云 数据库初始化 保持docker数据库一直打开 docker update redis --restartalways 连不上了,发现配置文件错了 换了一个配置文件。 快速开发 使用开源的脚手架 人人开源 (gitee.com) 使用renren-fast作为后台开发,使用…...
Vue3入门到实战笔记02
9. watch 作用:监视数据的变化(和Vue2中的watch作用一致)特点:Vue3中的watch只能监视以下四种数据: ref定义的数据。reactive定义的数据。函数返回一个值(getter函数)。一个包含上述内容的数组…...
CDN高防IP:技术解析与相关问题解答
在使用CDN高防IP技术的过程中,可能会遇到一些问题。下面是一些常见问题和相应的解答,希望能帮助读者更好地了解和使用CDN高防IP技术。 问题一:什么是CDN高防IP技术? 解答:CDN高防IP技术是一种通过将网站流量分散到多…...
【React】react组件传参
【React】react组件传参 一、props:父组件向子组件传参1、将普通的参数作为props传递2、将jsx作为props传递(组件插槽)(1)基础功能示例(2)进阶示例 二、自定义事件:子父组件向父组件…...
Vue/html中点击复制到剪贴板
1.使用JQ实现复制功能 html <div class"tran_one tran_yi"><div class"form-group"><textarea>文本</textarea></div><div class"form-group tran_group"><div class"tran_flex tran_left tran_co…...
MtfLive直播导航PHP源码,附带系统搭建教程
将自动采集斗鱼、虎牙、触手、YY、章鱼、电视直播按分类/关键词聚合,用户选择分类,可以观看到全网该关键词下正在直播的内容。 特点 PC站和H5移动站自适应 自动缓存,避免频繁抓取数据 自定义抓取采集规则,同时支持HTML和JSON …...
day19 初始HTML
什么是HTML HTML(Hyper Text Markup Language)超文本标记语言 超文本包括:文字、图片、音频、视频、动画等 HTML5,提供了一些新的元素和一些有趣的新特性,同时也建立了一些新的规则。这些元素、特性和规则的建立&…...
从编程中理解:退一步海阔天空
编程中,“退一步海阔天空”的理念指的是在面对问题时,有时过于纠结于细节或局部优化,反而会陷入困境。这时,如果能暂时放下手中的具体工作,从更高的层面或者换个角度来审视整个系统的设计和架构,可能会发现…...
【前沿技术杂谈:开源软件】引领技术创新与商业模式的革命
【前沿技术杂谈:开源软件】引领技术创新与商业模式的革命 开源软件如何推动技术创新开源软件的开放性和协作精神促进知识共享和技术迭代推动关键技术的发展开源软件与新技术的融合 开源软件的商业模式开源软件的商业模式将开源软件与商业软件相结合 开源软件的安全风…...
c# datatable 通过反射转成泛型list
在C#中,可以使用反射来将DataTable转换为泛型列表。下面是一个示例代码,展示了如何使用反射来实现这个转换过程: using System; using System.Collections.Generic; using System.Data;public class DataConverter {public List<T> Co…...
如何保证MySQL数据一致性
在当今大数据时代,数据库系统扮演着至关重要的角色,而MySQL作为一种流行的关系型数据库管理系统,在数据一致性方面拥有着丰富的机制和技术。下面简单的探讨MySQL是如何保证数据一致性的。 事务与ACID特性 要了解MySQL如何保证数据一致性&am…...
Android学习之路(27) ProGuard,混淆,R8优化
前言 使用java编写的源代码编译后生成了对于的class文件,但是class文件是一个非常标准的文件,市面上很多软件都可以对class文件进行反编译,为了我们app的安全性,就需要使用到Android代码混淆这一功能。 针对 Java 的混淆&#x…...
进程中线程使用率偏高问题排查
1. top命令查看CPU使用率高的进程 2. top -H -p 15931(进程PID) 查看进程下的线程 3. printf "%x\n" 17503(线程PID) 线程PID 10进制转16进制 0x445f 4. jstack -l 15931(JVM进程PID) 导出java进程栈信息,里面包含线程nid0x445f和所在的类࿰…...
【JavaEE进阶】 图书管理系统开发日记——肆
文章目录 🍃前言🎍约定前后端交互接⼝🍀服务器代码实现🚩控制层🚩业务层🚩数据层 🌴前端代码的修改⭕总结 🍃前言 今天我们来实现修改图书模块 首先我们先来看一下,需要…...
STM32--USART串口(1)串口协议
一、通信接口 全双工:通信双方能够同时进行双向通信; 半双工:通信双方能够进行双向通信,但不能同时通信; 单工:只能从一个设备到另一个设备; 同步:接收方可以在时钟信号的指引下进…...
单臂路由实验(华为)
思科设备参考: 单臂路由实验(思科) 一,实验目的 在路由器的一个接口上通过配置子接口的方式,实现相互隔离的不同vlan之间互通。 二,设备配置 Switch1 <Huawei>sys [Huawei]vlan batch 10 20…...
websocket编写聊天室
【黑马程序员】WebSocket打造在线聊天室【配套资料源码】 总时长 02:45:00 共6P 此文章包含第1p-第p6的内容 简介 温馨提示:现在都是第三方支持聊天,如极光,学这个用于自己项目完全没问题,大项目不建议使用 需求分析 代码...
【论文解读】Collaboration Helps Camera Overtake LiDAR in 3D Detection
CoCa3D 摘要引言Collaborative Camera-Only 3D DetectionCollaborative depth estimationCollaborative detection feature learning 实验结论和局限 摘要 与基于 LiDAR 的检测系统相比,仅相机 3D 检测提供了一种经济的解决方案,具有简单的配置来定位 3…...
【Python实战】Python多线程批量采集图片
前言 本文来介绍如何多线程采集图片,多线程效率更快,但是,我们单一IP请求过于频繁,可能会被反爬,被封IP,所以,我们就要用到IP代理池,这里,我给大家推荐一个,可…...
springboot 百货中心供应链管理系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,百货中心供应链管理系统被用户普遍使用,为方…...
docker详细操作--未完待续
docker介绍 docker官网: Docker:加速容器应用程序开发 harbor官网:Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台,用于将应用程序及其依赖项(如库、运行时环…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销,平衡网络负载,延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module
1、为什么要修改 CONNECT 报文? 多租户隔离:自动为接入设备追加租户前缀,后端按 ClientID 拆分队列。零代码鉴权:将入站用户名替换为 OAuth Access-Token,后端 Broker 统一校验。灰度发布:根据 IP/地理位写…...
新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案
随着新能源汽车的快速普及,充电桩作为核心配套设施,其安全性与可靠性备受关注。然而,在高温、高负荷运行环境下,充电桩的散热问题与消防安全隐患日益凸显,成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...
【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)
升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点,但无自动故障转移能力,Master宕机后需人工切换,期间消息可能无法读取。Slave仅存储数据,无法主动升级为Master响应请求ÿ…...
爬虫基础学习day2
# 爬虫设计领域 工商:企查查、天眼查短视频:抖音、快手、西瓜 ---> 飞瓜电商:京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空:抓取所有航空公司价格 ---> 去哪儿自媒体:采集自媒体数据进…...
初学 pytest 记录
安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...
push [特殊字符] present
push 🆚 present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中,push 和 present 是两种不同的视图控制器切换方式,它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...
Python 训练营打卡 Day 47
注意力热力图可视化 在day 46代码的基础上,对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...
