canvas之放大镜效果

利用canvas来实现放大镜效果很简单，而且效果相对于传统的js实现，更加流畅，体验效果更好。下面来具体实现一下（主要利用了canvas处理图片的相关方法）：

1、整体的页面布局：
两个画布，一个存放原图，一个存放放大区域的展示效果

<div><canvas width="800" height="400" id="canvas1"></canvas><canvas width="200" height="100" id="canvas2"></canvas>
</div>

2 、实现放大镜效果的思路
首先通过预加载，加载一张图片并放在画布中；然后给外层的盒子一个监听事件，当鼠标在盒子中移动，触发事件，然后执行一个事件回调函数，在这个回调函数中，对画布2（canvas2）的相对位置进行修改。移动完毕要清除canvas2区域然后重绘下一个canvas2显示区域。这里我们分为以下两种形式：

1 局部放大：
js部分：

        // 获取canvas1var canvas1 = document.querySelector("#canvas1");//获取canvas2var canvas2 = document.querySelector("#canvas2");// 图像稍后再此会被渲染，由 CanvasRenderingContext2D 接口完成实际的绘制var ctx1 = canvas1.getContext("2d");var ctx2 = canvas2.getContext("2d");//获取父容器var div = document.querySelector("div");// 加载图片var img = new Image();img.src = "./img/9-.png";img.addEventListener("load", loadHandler);function loadHandler(e) {//鼠标在父容器移动监听事件div.addEventListener("mousemove", mouseHandler)// 将加载的图片放在画布canvas1中，因为监听事件时异步的不会影响图片的放入ctx1.drawImage(img, 0, 0, 800, 800);}function mouseHandler(e) {// 利用 e.clientX,e.clientY 改变canvas2的相对位置console.log(e.clientX, e.clientY)canvas2.style.left = e.clientX + "px";canvas2.style.top = e.clientY + "px";// 清除ctx2矩形区域ctx2.clearRect(0, 0, 200, 100);// 参数1将img加载到画布中，参数2和3，设置裁切的起始位置坐标，参数4和5设置裁切的宽高，参数6和7设置图片裁切后放置的位置，参数8和9设置图片放置后的缩放宽高ctx2.drawImage(img, e.clientX * (img.width / 800), e.clientY * (img.height / 800),100,50, 0, 0, 300, 150);}

css部分：

 <style>canvas{position: absolute;left:0;top:0;}div{position: relative;}</style>

最终呈现的效果：鼠标移动跟随

2 购物车放大镜效果
整体的思路和上面一样，都是通过改变canvas2的相对位置，将图片裁切后放入画布中，展现出来。

这里只对事件回调函数部分稍作修改即可实现效果

// loaderHandler
function loadHandler(e) {//鼠标在父容器移动监听事件canvas1.addEventListener("mouseenter", mouseHandler)// 将加载的图片放在画布canvas1中，因为监听事件时异步的不会影响图片的放入ctx1.drawImage(img, 0, 0, 400, 400);
}
// mouseHandler回调函数
function mouseHandler(e) {switch (e.type) {case "mouseenter":canvas1.addEventListener('mousemove',mouseHandler);canvas1.addEventListener('mouseleave', mouseHandler);break;case "mousemove":canvas2.style.display = 'block';// 参数1将img加载到画布中，参数2和3，设置裁切的起始位置坐标，参数4和5设置裁切的宽高，参数6和7设置图片裁切后放置的位置，参数8和9设置图片放置后的缩放宽高ctx2.drawImage(img, e.clientX, e.clientY, 400, 400, 0, 0, 400, 400);break;case "mouseleave":canvas2.style.display = 'none';canvas1.removeEventListener('mousemove',mouseHandler);canvas1.removeEventListener('mouseleave',mouseHandler);break;}
}

效果展示：

整体感觉相对于js版本，更加流畅。它也能一定程度上解决一个问题：当你鼠标滚动页面，图片展示区域和放大区域会相对上移或下移（同步的），而用js实现的会出现很奇怪的一个现象，你的鼠标位置和视口呈现的内容不匹配，由于使用的是e.clientX,e.clienY相对视口来定位的（你的鼠标位置变了）。使用canvas可以很好的规避这个问题。

canvas之放大镜效果相关推荐

html中放大镜案列,Canvas实现放大镜效果完整案例分析(附代码)
本文主要记录 canvas 在图像.文字处理.离屏技术和放大镜特效的实现过程中使用到的api.先看下效果吧: 一张模糊的图片: 鼠标点击任意位置,产生放大效果: 哇塞~ 一个帅哥,哈哈哈哈~ 1.放大 ...
html放大镜原理,Canvas实现放大镜效果完整案例分析(附代码)
本文主要记录 canvas 在图像.文字处理.离屏技术和放大镜特效的实现过程中使用到的API.先看下效果吧: 一张模糊的图片: 鼠标点击任意位置,产生放大效果: 哇塞~ 一个帅哥,哈哈哈哈~ 1.放大 ...
html5 放大镜效果,JavaScript+HTML5 canvas实现放大镜效果完整示例
本文实例讲述了JavaScript+HTML5 canvas实现放大镜效果.分享给大家供大家参考,具体如下: 效果: www.jb51.net canvas放大镜 #copycanvas { bord ...
canvas整体放大_【HTML5】Canvas 实现放大镜效果
图片放大镜效果原理首先选择图片的一块区域,然后将这块区域放大,然后再绘制到原先的图片上,保证两块区域的中心点一致, 如下图所示: 初始化获得 canvas 和 image 对象,这里使用标签 ...
Canvas实现放大镜效果
引言:大家都在淘宝上买过东西吧,应该都知道鼠标放到照片上时会将图片放大,这就是接下来要写的放大镜效果. 主要思路:其实很简单就是用drawImage这个方法来操作的,两个画布一个将原图绘制上去,另一个 ...
练手小项目——canvas放大镜效果放大图片
参考:canvas之放大镜效果_WHTGS的博客-CSDN博客_canvas 放大镜效果: 代码: <!DOCTYPE html> <html lang="en" ...
android 放大镜动画,Android在图片上进行放大镜效果（放大镜形状）
Android 图片上放大镜效果实现 1.[文件] ZoomView.java ~ 5KB 下载(55) package com.study.hello; import android.con ...
js实现图片放大镜效果
效果图代码实现过程 html部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
canvas-实现放大镜效果
canvas-实现放大镜效果目录文章目录前言推荐阅读代码展示结果展示前言本文为canvas实现放大镜逻辑简单,适合作为基础项目练手推荐阅读 <H5 canvas核心技术> ...

canvas之放大镜效果

canvas之放大镜效果相关推荐

最新文章

热门文章