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: [email protected]
* @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>