利用 canvas 除了可以实现滤镜,还可以利用 离屏技术 放大镜功能。
为了方便讲解,本文分为 2 个应用部分:
实现水印和中心缩放
实现放大镜
1. 什么是离屏技术?
canvas 学习和滤镜实现 介绍过 drawImage 接口。除了绘制图像,这个接口还可以: 将一个 canvas 对象绘制到另一个 canvas 对象上 。这就是离屏技术。
2. 实现水印和中心缩放
在代码中,有两个 canvas 标签。分别是可见与不可见。 不可见的 canvas 对象上的 Context 对象,就是我们放置图像水印的地方。
更多详解,请看代码注释:
<!DOCTYPE html>