前端之家收集整理的这篇文章主要介绍了
canvas离屏技术与放大镜实现代码示例,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
利用 canvas 除了可以实现滤镜,还可以利用 离屏技术 放大镜
功能。
为了方便讲解,本文分为 2 个应用部分:
实现水印和中心缩放
实现放大镜
1. 什么是离屏技术?
canvas 学习和滤镜实现 介绍过 drawImage 接口。除了绘制图像,这个接口还可以: 将一个 canvas 对象绘制到另一个 canvas 对象上 。这就是离屏技术。
2. 实现水印和中心缩放
在
代码中,有两个 canvas
标签。分别是可见与不可见。 不可见的 canvas 对象上的 Context 对象,就是我们放置图像水印的地方。
更多详解,请看
代码注释:
Learn Canvas