canvas绘图中的图片组合

时间2020-4-4周六（第一次写，也就是一个学习总结）

1.canvas简介

Canvas是一个矩形区域的画布，可以用JS控制每一个像素在上面绘画。canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

canvas使用方法

获取画布

let canvas=document.getElementById("canvas");

获取画笔

let context=canvas.getContext("2d");

后面就可以开始画图了

context.arc(80,0,80,0,Math.PI,false);//前两个数字是圆心坐标，第三个数字是半径，(0，Math.PI)，false顺时针

各种样式及例子(只需要在两个图片的代码中加入globalCompositeOperation属性)

1.source-over

默认样式（和不设置globalCompositeOperation属性一样）。
在目标图像上(先画的)显示源图像(后画的)

context.globalCompositeOperation="source-over";

效果展示

source-atop

在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。

<canvas id="canvas" height="500" width="500">
    <p>您的浏览器不支持canvas</p>
</canvas>
<script type="text/javascript">
    //绘制圆形
    let canvas=document.getElementById("canvas");
    let context=canvas.getContext("2d");
    //第一种
    context.fillStyle = "red";//设置填充颜色（风格）
    context.beginPath();
    context.arc(40,250,30,0,Math.PI*2,true);
    context.closePath();//填充颜色需要关闭路径
    context.fill();//开始填充
    context.globalCompositeOperation="source-atop";//关键代码
    context.fillStyle = "green";
    context.beginPath();//开始路径
    context.arc(70,250,25,0,Math.PI*2,true);
    context.closePath();//填充颜色需要关闭路径
    context.fill();//开始填充
</script>

效果展示

source-in

相当于第二个图像覆盖了第一个图像，但两个图形都变成透明的，只有重叠的地方显色（因为第一个图形被覆盖，所以显色为第二个图形颜色）

context.globalCompositeOperation="source-in";

效果展示

source-out

第一个图形覆盖住第二个图形，并变得透明，第二个图形不受影响（只不过被覆盖的地方无法显色）

context.globalCompositeOperation="source-out";

效果展示

小结：前面四种和后面四种效果完全一样，只不过覆盖顺序改反过来了 

destination-over

在源图像上方显示目标图像。

context.globalCompositeOperation="destination-over";

效果展示

destination-atop

在源图像顶部显示目标图像。源图像之外的目标图像部分不会被显示。

context.globalCompositeOperation="destination-atop";

效果展示

destination-in

第一个图形覆盖第二个图形，全部透明，只有重叠部分显色（第一个图形的颜色）

context.globalCompositeOperation="destination-in";

效果展示

destination-out

第一个图形覆盖第二个图形，第二个图形所在区域全部透明

context.globalCompositeOperation="destination-out";

效果展示

lighter

两个图形都显色，重叠部分颜色融合

context.globalCompositeOperation="lighter";

copy

这个属性写在哪个图形后面，哪个图形就透明不显色

context.globalCompositeOperation="copy";

效果展示

总结

1.globalCompositeOperation这个属性有目标性（自己总结的用词可能不是很准确），写在哪一个图形后面，哪一个图形就是第一个图形，就算是写在最后面的代码上面，那么哪一个代码组成的图形就为组合的时候的第一个图形
2.1-4的属性和5-8的属性基本一一对应，不同点是1-4是第一个图形被覆盖，5-8是第二个图型被覆盖。