代码拉取完成，页面将自动刷新
本示例模拟草稿画板，实现画布线条绘制和双指滑动，线条可以回撤,删除和保存
1.本示例仅支持标准系统上运行，支持设备：华为手机。
2.DevEco Studio版本：DevEco Studio 5.0.1 Release及以上。
3.HarmonyOS SDK版本：HarmonyOS 5.0.1 Release SDK及以上。
1.利用Canvas组件构建画板，使用RenderingContext在Canvas组件上进行绘制。
在Canvas组件的onReady事件中初始化Canvas相关配置，onTouch事件中进行绘制
2.橡皮擦功能实现
this.canvasContext.globalCompositeOperation = 'destination-out';
this.paintSize = CommonConstants.ERASER_PAINTSIZE;
this.isStoke = false
3.清屏功能实现
this.canvasContext.clearRect(0, 0, 375, 720)
4.撤回功能实现:采用清除所有线条再绘制的形式实现
this.canvasContext.clearRect(0, 0, 375, 720);
this.pathArray.pop()
for (let i = 0; i < this.pathArray.length; i++) {
this.canvasContext.beginPath();
this.canvasContext.stroke(this.pathArray[i])
this.canvasContext.closePath();
}
5.保存上次画板功能实现
绘制时，使用toDataURL方法生成一个包含图片展示的URL，同时使用用户首选项将该URL保存，在aboutToAppear生命周期中获取该URL即可实现。
this.toDataURL = this.canvasContext.toDataURL('image/png', 0.92)
dataPreferences.putSync('url', this.toDataURL)
aboutToAppear(): void {
this.toDataURL = dataPreferences.getSync('url', 'default') as string
this.img = new ImageBitmap(this.toDataURL)
}
├─entry/src/main/ets 、
│ ├─common
│ │ └─Constants.ets // 常量
│ ├─entryability
│ │ └─EntryAbility.ets // 程序入口
│ ├─pages
│ │ └─Index.ets // 主页
│ │ └─CanvasDemo.ets // 画板页
│ │ └─SavePage.ets // 保存页
│ ├─utils
│ │ └─Logger.ets // 日志工具
-Canvas -CanvasRenderingContext2D -用户首选项
| 修改内容 | 时间 |
|---|---|
| README修改 | 2025.3.4 |
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手