没有合适的资源?快使用搜索试试~ 我知道了~
XXHolic#segment#66.Canvas 橡皮擦效果.751
需积分: 0 0 下载量 160 浏览量
2022-07-25
14:33:42
上传
评论
收藏 6KB MD 举报
温馨提示
试读
思路一开始想到 Canvas 的画布可以相互覆盖的特性,彩色原图作为背景,灰度图渲染到 Canvas 画布上,然后手指滑动的时候,把接触的部分清除掉,就显示出了
资源推荐
资源详情
资源评论
# 66.Canvas 橡皮擦效果.75
## 引子
解决了第一个问题[图像灰度处理][url-segment-65]之后,接着就是做擦除的效果。
## 思路
一开始想到 Canvas 的画布可以相互覆盖的特性,彩色原图作为背景,灰度图渲染到 Canvas 画布上,然后手指滑动的时候,把接触的部分清除掉,就显示出了背景图。关键的部分是怎么清除画布上已有图像,查询资料发现有两种方式:
1. 使用 [clearRect][url-mdn-clearRect] 方法,会把指定范围所有像素变成透明,并擦除之前绘制的所有内容。
2. 使用 [globalCompositeOperation][url-mdn-globalCompositeOperation] 属性,该属性设置在绘制新形状时应用合成操作的类型,值为 `destination-out` 时效果如下:
![66-destination-out][url-local-destination-out]
在上面两种方式中,第一种方式正是功能实现所需要的,但擦除时的边角效果没有第二种方式理想。下面以第二种方式作为示例。
## 实现
在实现的过程中,发现有几点需要注意:
- 手机端高清显示处理。
- 注意 `globalCompositeOperation` 属性设置的时机,过早设置,可能画布上无法显示内容。
- 擦除状态的控制,特别是在 PC 端,如果不设置相应状态,鼠标移动的时候就可能发生擦除。
这是[示例页面][url-lab-66-normal],移动端访问如下:
![66-normal][url-local-normal]
### 优化一
一般用户都不会全部进行擦除,而且这种体验也不好,所以擦除面积达到一定百分比时,自动擦除剩余的部分。
擦除效果实际上是改变了已有图像的透明度,可以通过 [getImageDa
点击阅读更多
资源评论
王者丶君临天下
- 粉丝: 18
- 资源: 265
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功