Canvas图像合成

码上生花

已于 2024-10-08 23:52:47 修改

阅读量1k

点赞数 12

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： html5 canvas

于 2024-09-16 20:12:09 首次发布

本文链接：https://blog.csdn.net/gghhb12/article/details/142306177

介绍

在默认情况下，将一个图像绘制在另一个图像之上，那么浏览器会简单地把源物体的图像叠放到目标图像上面。

然而可以通过修改Canvas绘图对象的globalCompositeOperation属性修改这种默认的叠放，该属性可以取表中所列的任意一个值。
在这里插入图片描述

这些值叫做Porter-Duff操作符，它们被描述在一篇由LucasFilm Ltd的Thomas Porter与Tom Duff所写的文章中，该文章发表在1984年7月的《Computer Graphics》杂志上。原文链接

属性值

值	描述
source-over	默认。在目标图像上显示源图像。
source-atop	在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。
source-in	在目标图像中显示源图像。只有目标图像之内的源图像部分会显示，目标图像是透明的。
source-out	在目标图像之外显示源图像。只有目标图像之外的源图像部分会显示，目标图像是透明的。
destination-over	在源图像上显示目标图像。
destination-atop	在源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的。
destination-in	在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示，源图像是透明的。
destination-out	在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示，源图像是透明的。
lighter	显示源图像 + 目标图像。
copy	显示源图像。忽略目标图像。
xor	使用异或操作对源图像与目标图像进行组合。

Demo演示

在这里插入图片描述

源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像合成</title>
    <style>
        #canvas {
     
     
            border: 1px solid cornflowerblue;
            position: absolute;
            left: 150px;
            top: 10px;
            background: #eeeeee;
            border: thin solid #aaaaaa;
            cursor: pointer;
            -webkit-box-shadow: rgba(200, 200, 255, 0.9) 5px 5px 10px;
            -moz-box-shadow: rgba