uniapp 图片擦除

### UniApp 中使用 Canvas 实现刮刮乐效果 在 UniApp 开发环境中，`<canvas>` 组件提供了绘制图形的能力。为了实现刮奖功能，主要依赖于 `globalCompositeOperation='destination-out'` 属性来擦除特定区域的内容，从而暴露出底层图像或文字。 #### 创建 HTML 结构 首先，在页面模板文件中声明 `<canvas>` 元素： ```html <template> <view class="container"> <!-- 定义画布 --> <canvas type="2d" id="scratchCanvas"></canvas> <!-- 底层内容（被遮盖部分），可以是图片或其他形式 --> <image src="/static/images/prize.png" mode="widthFix" style="position:absolute;z-index:-1;"></image> </view> </template> <style scoped> .container { position: relative; } #scratchCanvas { width: 300px; height: 300px; border-radius: 8px; background-color: gray; } </style> ``` 上述代码设置了基本布局样式并引入了一张作为奖励图案的静态资源图片[^2]。 #### 初始化 Canvas 和监听触摸事件 接着，在 JavaScript 文件里初始化 Canvas 上下文对象，并设置好初始状态： ```javascript export default { data() { return { ctx: null, isScratching: false, // 是否正在刮奖标志位 }; }, onLoad() { const query = uni.createSelectorQuery().in(this); query.select('#scratchCanvas') .fields({node: true, size: true}) .exec((res) => { let canvas = res[0].node; this.ctx = canvas.getContext('2d'); // 设置顶层灰色覆盖层 this.ctx.fillStyle = 'gray'; this.ctx.fillRect(0, 0, res[0].width, res[0].height); // 配置合成模式为擦除操作 this.ctx.globalCompositeOperation = 'destination-out'; // 添加触控事件处理程序 canvas.addEventListener('touchstart', (e) => {this.isScratching=true;},false); canvas.addEventListener('touchmove', (e) => {if(this.isScratching)this.draw(e);},false); canvas.addEventListener('touchend', () => {this.isScratching=false;},false); }); }, methods: { draw(event){ var rect=event.target.getBoundingClientRect(); var x=event.touches[0].clientX-rect.left; var y=event.touches[0].clientY-rect.top; this.ctx.beginPath(); this.ctx.arc(x,y,20,0,Math.PI*2,true); this.ctx.fill(); console.log(`Drawing at (${x},${y})`); } } }; ``` 这段脚本实现了当用户手指滑过屏幕时会触发相应的绘画逻辑，进而模拟出真实的刮奖体验。

### 如何在 UniApp 中清除页面的历史记录 在 UniApp 应用程序中，可以通过 `uni.removeStorageSync` 方法来清除本地存储中的历史记录数据。此方法允许立即同步删除指定键名对应的缓存数据。 对于具体实现而言，在定义好用于保存搜索关键字列表的键名称之后，调用该函数即可轻松移除这些记录： ```javascript function clearHistory(keyname) { uni.removeStorageSync(keyname); } ``` 上述代码片段展示了如何创建一个名为 `clearHistory` 的 JavaScript 函数，它接受参数 `keyname` 表示要清理的数据项标识符，并通过内置 API 实现即时清除操作[^2]。 当用户希望执行清空动作时（比如点击界面上某个按钮触发事件），只需简单地传入之前设定好的键名作为实参调用这个函数就能达到目的了。通常情况下，开发者会在项目初始化阶段就确定好用来区分不同种类缓存项目的唯一字符串常量，以便于后续维护管理。 另外值得注意的是，如果想要批量处理多条记录，则可以考虑先读取现有内容再逐一分析过滤后再重新写回到持久化层；不过针对单纯全部擦除的需求来说，直接利用上面提到的方式已经足够高效便捷[^3]。