本文主要记录 canvas 在图像、文字处理、离屏技术和放大镜特效的实现过程中使用到的API。先看下效果吧:

一张模糊的图片:



鼠标点击任意位置,产生放大效果:



哇塞~ 一个帅哥,哈哈哈哈~

1、显示模糊照片

其实一般的交互不是模糊照片,这里我只是为了夸张下效果,用了张模糊的原图,哈哈哈,canvas本身是可以对清晰的图片做滤镜处理,涉及到很多图形学的算法,然后我不会,默默的打开了PS手动高斯模糊了一张照片...嗯,没毛病!

首先定义一个canvas元素

  <canvas id="canvas"></canvas>
//定义canvas画布
var canvas1 = document.getElementById('canvas1');
ctx1 = canvas.getContext('2d'); //模糊图片加载
var image1 = new Image();
image1.src = "./模糊.png"; //图片加载成功后绘制图片
image1.onload = function() {
//drawImage 在画布上绘制模糊图片
ctx1.drawImage(image1, 0, 0, canvas1.width, canvas1.height);
};

ctx1.drawImage(图片,x位置,y位置,图片显示宽度,图片显示高度)

2、放大镜原理

实现效果:如上图,点击或点击滑动鼠标显示一个区域,区域中显示对应点击部分范围的放大清晰图片。那么问题就可以肢解为3部分:

1、如何在canvas(模糊图)上再画出另外一个canvas(清晰放大图);
2、如何将canvas中显示的(清晰放大图)剪切出圆形区域。
3、如何在鼠标点击滑动的时候显示该区域;

3、加载清晰图片

我们再加一个canvas(放大镜看到的图片),初始隐藏:

<canvas id="canvas2" style="display:none"></canvas>
var canvas2 = document.getElementById('canvas2'),
ctx2 = canvas2.getContext('2d'),
scale = 2; // 放大倍数 // canvas2的图片大小是模糊图片的2倍
canvas2.width = canvas.width * scale;
canvas2.height = canvas.height * scale; // 在canvas2中加载图片
var image2 = new Image();
image2.src = "name2.png"; image2.onload = function() {
ctx2.drawImage(image2, 0, 0, canvas2.width, canvas2.height);
};

3、显示放大镜

3.1 绘制放大镜

鼠标所处的位置点(x,y)是区域的中心,计算出清晰图所在的位置点,我们先假设绘制一个正方形;

// 圆的半径是mr
var mr = 100; // 对应模糊图的左上角起点
var dx = x - mr,
dy = y - mr; // 找出清晰图截图的左上角起点
var sx = x * scale - mr,
sy = y * scale- mr;

截取圆形

// 保存当前状态
ctx.save();
// 边框
ctx.strokeStyle = "#9eddf1";
ctx.lineWidth = 3;
// 开始绘制
ctx.beginPath();
//
ctx.arc(x, y, mr, 0, Math.PI * 2);
ctx.stroke();
// 表示剪切
ctx.clip();
// 释放当前状态
ctx.restore();

绘制状态的最佳搭档save()和restore():用于对当前状态的保存及释放不影响其他操作;可用于重复的绘制图形的变化过程;

clip():表示剪切区域

3.2 离屏技术

所谓的离屏技术就是在一个canvas上绘制另外一个canvas,前面使用的绘制图片的API是drawImage(),它分别可以支持,3个、5个和9个参数; 其中第一个参数既可以是图片,也可以是canvas对象!那么我们就可以使用这个方法,在圆上绘制出清晰图了~

    // 在对应的位置上重新绘制图片
//drawImage(img,sx,sy,swidth,sheight,x,y,width,height) 9个参数时
//img: 图片/canvas
//sx: 图片的X起点
//sy: 图片的Y起点
//swidth:要绘制的图片选取的宽度
//sheight:要绘制的图片选取的高度
//x,y:图片在canvas上显示的位置
//width,height:在Canvas上要显示的大小 ctx1.drawImage(canvas2, sx, sy, 2 * mr, 2 * mr, dx, dy, 2 * mr, 2 * mr);

4、鼠标交互事件

效果:鼠标点击并滑动鼠标产生反应,松开鼠标或者移除画布则失效。处理如下:

//定义一个判断鼠标是否是点击滑动的标识符
var flag; //鼠标点入事件
canvas.onmousedown = function(e) {
flag = true;
//显示放大镜
}
// 鼠标移动事件
canvas.onmousemove = function(e) {
if (flag) {
//显示放大镜
}
}
//鼠标松开事件
canvas.onmouseup = function(e) {
flag = false;
// 隐藏放大镜
}
//鼠标离开事件
canvas.onmouseout = function(e) {
flag = false;
// 隐藏放大镜
}

Canvas实现放大镜效果完整案例的更多相关文章

  1. 【HTML5】Canvas 实现放大镜效果

    图片放大镜 效果 在线演示    源码 原理 首先选择图片的一块区域,然后将这块区域放大,然后再绘制到原先的图片上,保证两块区域的中心点一致, 如下图所示: 初始化 <canvas id=&qu ...

  2. canvas知识02:图片放大镜效果

    效果截图: JS代码: <script> // 初始化canvas01和上下文环境 var cav01 = document.getElementById('cav01'); var cx ...

  3. 关于jQuery中实现放大镜效果

    1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...

  4. 原生js实现放大镜效果

    今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个 ...

  5. jQuery实现放大镜效果

    1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...

  6. jquery放大镜效果

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  7. WPF设置VistualBrush的Visual属性制作图片放大镜效果

    原文:WPF设置VistualBrush的Visual属性制作图片放大镜效果 效果图片:原理:设置VistualBrush的Visual属性,利用它的Viewbox属性进行缩放. XAML代码:// ...

  8. JavaEE开发之记事本完整案例(SpringBoot + iOS端)

    上篇博客我们聊了<JavaEE开发之SpringBoot整合MyBatis以及Thymeleaf模板引擎>,并且在之前我们也聊了<Swift3.0服务端开发(五) 记事本的开发(iO ...

  9. js---电商中常见的放大镜效果

    js中的放大镜效果 在电商中,放大镜效果是很常见的,如下图所示: 当鼠标悬浮时,遮罩所在区域在右侧进行放大. 在动手写之前,我们要先理清思路,分析需求,所需知识点,再将每一块进行组装,最后进行功能的完 ...

  10. 原生js实现简单的放大镜效果

    前言:相信很多同学在浏览购物网站的时候都会用到过放大镜的功能,这个功能在日常的网站也会经常用到.接下来我们开始实现一下它吧: (1)首先了解一下放大镜效果的html架构:如下图,它由两部分组成. ht ...

随机推荐

  1. 尝试asp.net mvc 基于controller action 方式权限控制方案可行性

    微软在推出mvc框架不久,短短几年里,版本更新之快,真是大快人心,微软在这种优秀的框架上做了大量的精力投入,是值得赞同的,毕竟程序员驾驭在这种框架上,能够强力的精化代码,代码层次也更加优雅,扩展较为方 ...

  2. fiddler和xampp安装成功后,网站打不开的原因

    fiddler和xampp安装成功后,网站打不开,出现403的错误 解决办法 编辑httpd.conf文件注释掉以下代码 #AllowOverride none # Require all denie ...

  3. HDU5724 Chess(SG定理)

    题目 Source http://acm.hdu.edu.cn/showproblem.php?pid=5724 Description Alice and Bob are playing a spe ...

  4. NOIP1998 拼数

    http://www.luogu.org/problem/show?pid=1012 题目描述 设有n个正整数(n≤20),将它们联接成一排,组成一个最大的多位整数. 例如:n=3时,3个整数13,3 ...

  5. C++11 多线程 基础

    C++11开始支持多线程编程,之前多线程编程都需要系统的支持,在不同的系统下创建线程需要不同的API如pthread_create(),Createthread(),beginthread()等,使用 ...

  6. Hibernate学习之延迟加载

    转自:http://www.cnblogs.com/xiaoluo501395377/p/3371776.html 在hibernate中我们知道如果要从数据库中得到一个对象,通常有两种方式,一种是通 ...

  7. 【OpenMesh】创建一个正方体

    原文出处: http://openmesh.org/Documentation/OpenMesh-Doc-Latest/tutorial.html 这个例程演示了: 如何声明MyMesh 如何添加顶点 ...

  8. [翻译 EF Core in Action 2.0] 查询数据库

    Entity Framework Core in Action Entityframework Core in action是 Jon P smith 所著的关于Entityframework Cor ...

  9. 开源微信管家平台——JeeWx 捷微4.0 微服务版本发布,全新架构,全新UI,提供强大的图文编辑器

    JeeWx捷微4.0   微服务版本发布^_^ 换代产品(全新架构,全新UI,提供强大的图文编辑器) JEEWX 从4.0版本开始,技术架构全新换代,采用微服务架构,插件式开发,每个业务模块都是独立的 ...

  10. asp.net core 中间件应用

    中间件是一种装配到应用管道以处理请求和响应的软件. 每个组件: 选择是否将请求传递到管道中的下一个组件. 可在调用管道中的下一个组件前后执行工作. 请求委托(Request delegates)用于生 ...