canvas中图形的组合方式

作者: LinDaiDai_霖呆呆 | 来源:发表于2017-09-21 13:06 被阅读335次

前文

我们在用canvas绘图中,经常会碰到当俩个图形重叠时怎么办的问题,这篇文章介绍的就是一些关于俩个图形重叠时的样式的处理问题

1. 设置组合方式

我们可以通过globalCompositeOperation这个属性,我们可以来更改俩个图形重叠时的样式

如:是想让新图覆盖原始图,还是只保留重叠部分等等.

语法:

ctx.globalCompositeOperation = source-in

先来看看几个属性值:
source-over 默认属性,新图像会覆盖在原有图像
source-in 只保留当前图重叠的部分
source-out 绘制不重叠部分
source-atop 新图像仅仅显示与老图像重叠区域,老图像仍然可以显示
destination-over 原图覆盖新图
destination-in 绘制原图和新图重叠部分
destination-out 绘制原图和新图不重叠部分
destination-atop 绘制原图和新图重叠部分以及新图
lighten 绘制新图和原图,重叠部分加色处理
darken 保留重叠部分最黑的像素
lighter 保证重叠部分最量的像素
copy 绘制新图,覆盖原图
xor 重叠部分会变成透明

1.2 几种组合方式案例

例1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #canvas1{
            border:1px solid red;
        }
    </style>
</head>
<body>
<canvas id="canvas1" width="500" height="500"></canvas>
</body>
<script type="text/javascript">
    var canvas = document.getElementById("canvas1");
    var ctx = canvas.getContext("2d");

    ctx.fillStyle = "red";
    ctx.beginPath();
    ctx.arc(150, 150, 100, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();

    ctx.fillStyle = "green";
    ctx.beginPath();
    ctx.arc(250,150, 100, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();

</script>
</html>

上面的例子中,我没有对图片的重叠部分做任何的处理,效果就是和source-over一样,新图会覆盖原图: