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

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

简易直观图:

黄色圆为原图,蓝色正方形为新图
【H5】 canvas图像各种合成详解_第1张图片

红色圆为新图,蓝色为原图!

globalCompositeOperation = “source-over” 这是默认设置,新图形会覆盖在原有内容之上。
【H5】 canvas图像各种合成详解_第2张图片

destination-over  会在原有内容之下绘制新图形。
【H5】 canvas图像各种合成详解_第3张图片
source-in  新图形会仅仅出现与原有内容重叠的部分。其它区域都变成透明的。
【H5】 canvas图像各种合成详解_第4张图片

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

【H5】 canvas图像各种合成详解_第5张图片

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

【H5】 canvas图像各种合成详解_第6张图片

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

【H5】 canvas图像各种合成详解_第7张图片

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

【H5】 canvas图像各种合成详解_第8张图片

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

【H5】 canvas图像各种合成详解_第9张图片

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

【H5】 canvas图像各种合成详解_第10张图片

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

【H5】 canvas图像各种合成详解_第11张图片

xor  重叠的部分会变成透明。
【H5】 canvas图像各种合成详解_第12张图片

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

【H5】 canvas图像各种合成详解_第13张图片

以destination-out为例子,画个月亮实战效果:


<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>Documenttitle>
    <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>

效果图如下:

【H5】 canvas图像各种合成详解_第14张图片

你可能感兴趣的:(HTML5)