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

本文介绍: canvas如何设置图形各种混合模式呢？通过context.globalCompositeOperation = type的方法来实现。这里面的type有很多种。请参考列表。

在这里插入图片描述

查看专栏目录

canvas实例应用100+专栏，提供canvas的基础知识，高级动画，相关应用扩展等信息。canvas作为html的一部分，是图像图标地图可视化的一个重要的基础，学好了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 = type
					this.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()