时间2020-4-4星期六（第一次写，也就是学习总结）一、canvas简介Canvas是一块矩形区域的画布，可以用JS控制每个像素点绘画。canvas标签使用JavaScript在网页上绘制图像，本身不具备绘图功能。canvas有多种绘制路径、矩形、圆形、字符、添加图像的方法。2.Canvas使用方法获取画布letcanvas=document.getElementById("canvas");获取画笔letcontext=canvas.getContext("2d");后面可以开始画了context.arc(80,0,80,0,Math.PI,false);//前两个数是圆心坐标，第三个数是半径，(0,Math.PI),falseclockwise3.各种样式和例子（只需要在两张图片的代码中加入globalCompositeOperation属性即可）1.source-over默认样式（和不设置globalCompositeOperation属性一样）。在目标图像（先绘制）上显示源图像（后绘制）context.globalCompositeOperation="source-over";效果展示2.source-atop在目标图片之上显示源图片。目标图像之外的源图像部分不可见。您的浏览器不支持canvas
效果展示3.source-in相当于第二张图片覆盖第一张图片，但是两者都图形变透明是的，只有重叠的地方有颜色（因为第一个图形被覆盖了，所以颜色是第二个图形的颜色）context.globalCompositeOperation="source-in";效果展示4.source-out第一个图形被覆盖第二个图形变透明，第二个图形不受影响（只是被覆盖的区域不能着色）context.globalCompositeOperation="source-out";效果展示总结<--前四个和后四个效果完全一样，只是覆盖顺序颠倒了-->源图中的5.destination-over目标图片显示在上面context.globalCompositeOperation="destination-over";效果展示6.destination-atop在源图片之上显示目标图片。源图像之外的目标图像部分将不会显示。context.globalCompositeOperation="destination-atop";效果展示7.destination-in第一个图形覆盖第二个图形，全透明，只有重叠的部分有颜色（第一个图形的颜色）context.globalCompositeOperation="destination-in";效果展示8.destination-out第一个图形覆盖第二个图形，第二个图形所在区域全透明context.globalCompositeOperation="destination-out";效果展示9.Lighter两个图形都上色，重叠部分颜色融合context.globalCompositeOperation="lighter";效果展示10.哪个图写在copy属性后面，哪个图会透明不着色context.globalCompositeOperation="copy";效果展示（写在第一张图后面）总结1.globalCompositeOperation这个属性是有针对性的（我总结的话可能不是很准确），哪个图形写在哪个图形之后是第一个图形，即使写在lastcode，则该代码组合后形成的图形是第一个图形。2.1-4的属性和5-8的属性基本是一一对应的。不同的是，1-4是覆盖的第一个图形，而5-8是覆盖的第二个图形。
