【H5】 canvas图像各种合成详解

最新推荐文章于 2024-07-10 10:03:01 发布

舜岳

最新推荐文章于 2024-07-10 10:03:01 发布

阅读量1.5k

点赞数

分类专栏： HTML5 文章标签： HTML5 canvas

本文链接：https://blog.csdn.net/qq_41614928/article/details/90634307

版权

HTML5 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

本素材来源：https://www.cnblogs.com/hzj680539/p/5068487.html
尊重第一作者，把知识奉献给大家！

简易直观图：

黄色圆为原图，蓝色正方形为新图
在这里插入图片描述

红色圆为新图，蓝色为原图！

globalCompositeOperation = “source-over” 这是默认设置，新图形会覆盖在原有内容之上。
在这里插入图片描述

destination-over　　会在原有内容之下绘制新图形。
在这里插入图片描述
source-in　　新图形会仅仅出现与原有内容重叠的部分。其它区域都变成透明的。

destination-in 原有内容中与新图形重叠的部分会被保留，其它区域都变成透明的。

在这里插入图片描述

source-out　　结果是只有新图形中与原有内容不重叠的部分会被绘制出来。

在这里插入图片描述

destination-out　　原有内容中与新图形不重叠的部分会被保留。

在这里插入图片描述

source-atop　　新图形中与原有内容重叠的部分会被绘制，并覆盖于原有内容之上。

在这里插入图片描述

destination-atop　　原有内容中与新内容重叠的部分会被保留，并会在原有内容之下绘制新图形

在这里插入图片描述

lighter　　两图形中重叠部分作加色处理。

在这里插入图片描述

darker　　两图形中重叠的部分作减色处理。

在这里插入图片描述

xor　　重叠的部分会变成透明。
在这里插入图片描述

copy　　只有新图形会被保留，其它都被清除掉。

在这里插入图片描述

以destination-out为例子，画个月亮实战效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{background-color: #000;}
        canvas{border:1px solid deeppink;}
    </style>
</head>
<body>
    <canvas width='500' height='500'></canvas>

    <script>
        const oC = document.querySelector('canvas');
        const ctx = oC.getContext( "2d" );

        ctx.beginPath();
        ctx.fillStyle = '#fff'
        ctx.arc( 200,200,100,0,6.3,false )//源图像
        ctx.fill()
        ctx.closePath();    

        //"destination-out"     只显示目标图像之外的源图像
        ctx.globalCompositeOperation = "destination-out"

        ctx.beginPath();
        ctx.fillStyle = '#f00'
        ctx.arc( 250,200,100,0,6.3,false ) //目标图像
        ctx.fill()
        ctx.closePath();   
    </script>
</body>
</html>

效果图如下：

在这里插入图片描述

舜岳

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【H5】 canvas图像各种合成详解

本素材来源：https://www.cnblogs.com/hzj680539/p/5068487.html尊重第一作者，把知识奉献给大家！简易直观图：黄色圆为原图，蓝色正方形为新图红色圆为新图，蓝色为原图！globalCompositeOperation = “source-over” 这是默认设置，新图形会覆盖在原有内容之上。destination-over　　会在原有内容之下...
复制链接

扫一扫

专栏目录