canvas实现放大镜

r囧r小猫 2023-07-12 03:55 113阅读 0赞

### 简单实现商品放大镜 ###

我们先来简单实现下放大镜，嗯嗯…电商项目的商品详情的放大镜，差不多就是下面这个样子吧。

<canvas id="canvas1" width="600" height="337.335"></canvas>
    <canvas id="canvas2" width="600" height="337.335"></canvas>
    <script> var canvas1 = document.querySelector("#canvas1"); var canvas2 = document.querySelector("#canvas2"); var ctx1 = canvas1.getContext("2d") var ctx2 = canvas2.getContext("2d"); var img = new Image(); img.src = "./girl.jpg"; img.addEventListener("load", loadHandler); function loadHandler(e) { canvas1.addEventListener("mousemove", mouseHandler); canvas1.addEventListener("mouseleave", mouseHandler); ctx1.drawImage(img, 0, 0, 1366, 768, 0, 0, 600, 337.335); } function mouseHandler(e) { switch (e.type) { case "mousemove": ctx2.clearRect(0, 0, 600, 337.335); ctx2.drawImage(img, e.clientX, e.clientY, 600, 337.335, 0, 0, 600, 337.335); break; case "mouseleave": ctx2.clearRect(0, 0, 600, 337.335); canvas1.addEventListener("mousemove", mouseHandler); canvas1.addEventListener("mouseleave", mouseHandler); break; } } </script>

![在这里插入图片描述][20200306231457655.gif]

### 实现小屏放大镜 ###

有点小瑕疵，但至少功能实现了。

<style> .zoom{ position: relative; } #canvas1,#canvas2{ position: absolute; left: 0; top: 0; } </style>
    <div class="zoom">
        <canvas id="canvas1" width="600" height="337.335"></canvas>
        <canvas id="canvas2" width="200" height="100"></canvas>
    </div>
    <script> var canvas1 = document.querySelector("#canvas1"); var canvas2 = document.querySelector("#canvas2"); var ctx1 = canvas1.getContext("2d") var ctx2 = canvas2.getContext("2d"); //这样给div加mouse事件，不影响ctx1展示图片，也不影响ctx2显示放大部分 var div=document.querySelector(".zoom"); // 加载一张图片并且添加事件 var img = new Image(); img.src = "./bear.png"; img.addEventListener("load", loadHandler); function loadHandler(e) { div.addEventListener("mousemove", mouseHandler); div.addEventListener("mouseleave", mouseHandler); ctx1.drawImage(img, 0, 0, 1920, 1080, 0, 0, 600, 337.5); } function mouseHandler(e) { switch (e.type) { case "mousemove": canvas2.style.left = e.clientX-100 + "px";//以鼠标位置为中心 canvas2.style.top = e.clientY-50 + "px"; ctx2.clearRect(0, 0, 200, 100); ctx2.drawImage(img, (-150+e.clientX * (img.width / 600)), (-100+e.clientY * (img.height / 337.5)), 272,153, 0, 0, 200, 100); //鼠标走哪儿，他指哪儿 break; case "mouseleave": ctx2.clearRect(0, 0, 200, 100); canvas1.addEventListener("mousemove", mouseHandler); canvas1.addEventListener("mouseleave", mouseHandler); break; } } </script>

![在这里插入图片描述][20200306232822466.gif]  
白熊男孩，生日快乐。

[20200306231457655.gif]: https://img-blog.csdnimg.cn/20200306231457655.gif
[20200306232822466.gif]: https://img-blog.csdnimg.cn/20200306232822466.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，113人围观）

还没有评论，来说两句吧...

相关阅读

相关原生JS实现放大镜效果

1、鼠标经过box的时候显示 mask和bigBox ，当鼠标离开box的时候隐藏mask和bigBox2、当鼠标在盒子中移动的时候，让mask和鼠标一起移动3、当m...

Bertha 。/ 2024年04月28日 13:11/ 0 赞/ 222 阅读

相关原生js实现放大镜效果

今天是中秋佳节，在这了我祝大家中秋快乐，心想事成，工作顺利哈！放大镜效果在电商网站上较为常见的一个效果，主要针对鼠标在图片选取部分放大查看。效果如图所示 ![...

痛定思痛。/ 2024年04月18日 23:23/ 0 赞/ 237 阅读

相关 canvas实现放大镜

简单实现商品放大镜我们先来简单实现下放大镜，嗯嗯…电商项目的商品详情的放大镜，差不多就是下面这个样子吧。 <canvas id="canvas1" width

r囧r小猫/ 2023年07月12日 03:55/ 0 赞/ 114 阅读

相关 js实现放大镜效果

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>

男娘i/ 2023年07月08日 08:00/ 0 赞/ 176 阅读

相关 javascript 实现图片放大镜功能

淘宝上经常用到的一个功能是利用图片的放大镜功能来查看商品的细节下面我们来实现这样一个功能吧，原理很简单：实现一个可以随鼠标移动的虚框在另外一个块中对应显示虚框中

红太狼/ 2023年06月04日 04:59/ 0 赞/ 87 阅读

相关实现放大镜效果

1、布局文件 <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http:

╰半夏微凉°/ 2022年08月19日 12:16/ 0 赞/ 434 阅读

相关 canvas实现放大镜查看图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

忘是亡心i/ 2022年06月14日 03:19/ 0 赞/ 393 阅读

相关 jQuery实现放大镜效果

1.1.1 摘要相信大家都见过或使用过放大镜效果，甚至实现过该效果，它一般应用于放大查看商品图片，一些电商网站（例如：凡客，京东商城，阿里巴巴等）都有类似

超、凢脫俗/ 2022年06月07日 02:35/ 0 赞/ 458 阅读

相关 canvas画布实现放大镜

![70][] <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="U

Myth丶恋晨/ 2021年09月16日 04:22/ 0 赞/ 655 阅读

相关 canvas系列-图片处理(五)放大镜

![20170302134027469][] 一.原理当鼠标点击并移动在画布canvas中时，会显示放大后的图片一角。移除canvas，鼠标松开或是鼠标离开点击那块

梦里梦外;/ 2021年09月11日 08:28/ 0 赞/ 731 阅读