企业官网建设流程全解析

canvas是一款功能强大的画图工具，合理利用可以实现很多功能。这里演示一下“橡皮擦”效果，擦去图片上的元素。

一、效果演示

效果预览https://huatuya.com/

二、代码

PS：网上有很多资料，但要么是不全，要么是存在一些错误，这里提供一个一键复制完整版

原理：

1、获取背景色

2、利用canvas重新画图， fillRect、fillStyle、fill进行区域颜色填充。比如背景色是red，那么就将需要擦去的元素覆盖成red。

PS:代码直接复制，亲测无误。

<img :src="currentImg.src" @click="fillImg" /> data{ return { fillColor:"red",//要填充的颜色 currentImg{ src:"xxx", id:"" } } } fillImg(e) { var x = e.layerX; var y = e.layerY; var img = new Image();// 加载并显示图像到canvas上 img.src = this.currentImg.src; let _this = this; let classId = "quse" + _this.currentImg.id; // 创建一个新的canvas元素 var canvas = document.querySelector("#" + classId); if (!canvas) {//使用ID来判断是否已经创建过canvas元素，复用canvas canvas = document.createElement("canvas"); canvas.setAttribute("id", classId); //添加样式属性 document.body.appendChild(canvas); } img.onload = function () { // 设置canvas大小与要处理的图像相同 canvas.width = img.width; // 这里需要将imageWidth替换为实际图像的宽度 canvas.height = img.height; // 这里需要将imageHeight替换为实际图像的高度 // 获取2D上下文对象 var context = canvas.getContext("2d"); context.drawImage(img, 0, 0); // 将图像绘制到canvas上 // 指定要获取颜色的位置（x、y） // var x = 100; // 这里需要根据实际情况调整 // var y = 50; // 这里需要根据实际情况调整 // 先将背景色填充为透明，以便后面可以看到背景图片 context.globalCompositeOperation = "destination-out"; // 设置背景擦除区域的大小 context.fillRect(x, y, 1, 1); // 重置合成操作为默认值 context.globalCompositeOperation = "source-over"; // 设置新的背景色 context.fillStyle = _this.fillColor; // 替换为你想要的颜色 context.beginPath(); context.arc(x, y, 10, 0, 2 * Math.PI); // 以该坐标创建一个圆形的背景色填充区域 context.fill(); _this.currentImg.src = canvas.toDataURL();//将覆盖过的canvas替换掉原图片 canvas.setAttribute("style", "display:none"); //隐藏掉该canvas，避免在页面上显示出来 }; },

原文链接canvas实现橡皮擦效果擦去图片上的文字https://daimane.com/code/css3/1711633979831.html