介绍解决了第一个问题。图像灰度处理后，下一步就是擦除效果。OriginMyGitHub一开始就想到了Canvas画布可以相互覆盖的特性。以原始彩色图像作为背景，在Canvas画布上渲染灰度图像。然后当手指滑动时，触摸的部分被清除，显示背景图像。关键部分是如何清除画布上的现有图像。查询数据有两种方式：使用clearRect方法，该方法将使指定范围内的所有像素点透明，并擦除之前绘制的所有内容。使用globalCompositeOperation属性，它设置绘制新形状时要应用的复合操作的类型。当值为destination-out时，效果如下：以上两种方式中，第一种方式正是功能所需要的，但是在擦除边角时效果不如第二种方式理想。下面以第二种方式为例。实现在实现的过程中，我们发现有几点需要注意：手机端的高清显示处理。注意设置globalCompositeOperation属性的时机。如果设置得太早，内容可能无法显示在画布上。擦除状态控件，尤其是PC端，如果没有设置相应的状态，鼠标移动时可能会出现擦除。这是一个示例页面，移动端访问如下：优化-一般用户不会全部擦掉，这种体验不好，所以当擦掉的区域达到一定比例后，剩余的部分会自动清除擦除。擦除效果实际上改变了已有图片的透明度，通过getImageData方法可以查看到Canvas上图片的像素数据。通过统计满足透明度要求的像素百分比，就相当于被擦除区域的百分比。至于多少透明度才算有效擦除，要看实际的应用场景和想要达到的效果。以下是主要实现：/***获取透明度百分比，返回值<=1*@param{object}contextcanvas上下文对象*@param{number}opacityopacity的参考值，opacity的初始参考值透明度为128*/functiongetOpacityPercentage(context,opacity=128){varimageData=context.getImageData(0,0,248,415);varcolorDataArr=imageData.data;varcolorDataArrLen=colorDataArr.length;var擦除区域=[];//rgba显示模式，所以一个像素有4个分量，透明度是最后一个分量for(vari=0;i
