canvas制作离屏技术与放大镜效果

今天小编给大家分享的是canvas制作离屏技术与放大镜效果的详细介绍,相信大部分人都还没学会这个技能,为了让大家更加了解,给大家总结了以下内容,话不多说,一起往下看吧。

创新互联建站专注为客户提供全方位的互联网综合服务,包含不限于成都网站制作、成都做网站、鄂尔多斯网络推广、微信小程序开发、鄂尔多斯网络营销、鄂尔多斯企业策划、鄂尔多斯品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联建站为所有大学生创业者提供鄂尔多斯建站搭建服务,24小时服务热线:18982081108,官方网址:www.cdcxhl.com

利用 canvas 除了可以实现滤镜,还可以利用 离屏技术放大镜功能。

为了方便讲解,本文分为 2 个应用部分:

  • 实现水印和中心缩放

  • 实现放大镜

1. 什么是离屏技术?

canvas 学习和滤镜实现 介绍过 drawImage 接口。除了绘制图像,这个接口还可以: 将一个 canvas 对象绘制到另一个 canvas 对象上。这就是离屏技术。

2. 实现水印和中心缩放

在代码中,有两个 canvas 标签。分别是可见与不可见。 不可见的 canvas 对象上的 Context 对象,就是我们放置图像水印的地方。

更多详解,请看代码注释:




  
  Learn Canvas
  


  

实现效果如下图所示:

canvas制作离屏技术与放大镜效果

拖动滑竿,即可放大和缩小图像。然后右键保存图像。保存后的图像,就有已经有了水印,如下图所示:

canvas制作离屏技术与放大镜效果

3. 实现放大镜

在上述中心缩放的基础上,实现放大镜主需要注意以下 2 个部分:

  • 细化处理canvas的鼠标响应事件:滑入、滑出、点击和松开

  • 重新计算离屏坐标(详细公式计算思路请见代码注释)

  • 重新计算鼠标相对于 canvas 标签的坐标(详细公式计算思路请见代码注释)

代码如下:




  
  Document
  


  
  
  

放大镜效果如下图所示(被红笔标出的区域就是我们的正方形放大镜):

canvas制作离屏技术与放大镜效果

上述就是canvas制作离屏技术与放大镜效果的详细内容,详细使用情况还需要大家自己动手实验使用过才能领会。如果想了解更多,欢迎关注创新互联行业资讯频道!


本文题目:canvas制作离屏技术与放大镜效果
网站网址:http://myzitong.com/article/pjhoci.html