查看专栏目录
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() |
