canvas实现放大镜

r囧r小猫 2023-07-12 03:55 20阅读 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 条评论，20人围观）

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

相关阅读

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

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

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

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

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

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

相关 canvas实现放大镜

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

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

相关 js实现放大镜效果

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

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

相关实现放大镜效果

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

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

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

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

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

相关 jQuery实现放大镜效果

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

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

相关 js实现购物网站放大镜效果

> 在一些主流的购物网站上，我们经常能看到一些带有放大镜效果的图片框，看似神奇，指哪哪大，其实实现的原理很简单主要原理：实现放大镜的核心是需要有三套大小不同，形状相同的图片

亦凉/ 2022年03月21日 15:16/ 0 赞/ 338 阅读

相关 canvas画布实现放大镜

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

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

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

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

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