canvas元素——放大镜

最新推荐文章于 2024-03-29 17:03:34 发布
最新推荐文章于 2024-03-29 17:03:34 发布
阅读量212 收藏
点赞数
文章标签： canvas html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/html5_css3_js/article/details/80127292
版权 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .wrap {
            width: 400px;
            height: 600px;
            border: 1px solid black;
            position: relative;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <!--创建两个画布-->
        <canvas id="mycanvas" width="400" height="600"></canvas>
        <canvas id="mycanva_s" width="100" height="100" style="position:absolute;border:1px solid black;border-radius: 50%;"></canvas>
    </div>
    <script type="text/javascript">
        var wrap = document.querySelector(".wrap");
        var mycanvas = document.querySelector("#mycanvas");
        var mycanva_s = document.querySelector("#mycanva_s");
        var ctx = mycanvas.getContext("2d");//返回一个用于在画布上绘图的环境
        var ctx1 = mycanva_s.getContext("2d");
        var img = new Image();
        img.src = "img/5.jpg";
        img.onload = function() {
            ctx.drawImage(img, 0, 0, 400, 600);//在画布上绘制图像
            ctx1.drawImage(img, 0, 0, 400, 600);
        }
        var disX;
        var disY;

        wrap.onmousemove = function() {
            mycanva_s.style.display = "block";
            var event = event || window.event;
            disX = event.clientX - mycanva_s.offsetWidth / 2;
            disY = event.clientY - mycanva_s.offsetHeight / 2;
            a = wrap.offsetWidth - mycanva_s.offsetWidth;
            b = wrap.offsetHeight - mycanva_s.offsetHeight;
            if(disX <= 0) {
                disX = 0;
            }
            if(disY <= 0) {
                disY = 0;
            }
            if(disX >= a) {
                disX = a;
            }
            if(disY >= b) {
                disY = b;
            }
            mycanva_s.style.top = disY + "px";
            mycanva_s.style.left = disX + "px";
            console.log(disX + "???" + disY);
            ctx1.drawImage(img, disX * 2.1, disY * 1.65, 50, 50, 0, 0, 100, 100);
        };
        wrap.onmouseout = function() {
            mycanva_s.style.display = "none";
        }
    </script>
</body>
</html>

html5_css3_js
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas实现图像放大镜
08-31
主要为大家详细为大家详细介绍了canvas实现图像放大镜的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
canvas之放大镜效果
WHTGS的博客
04-04 1421
利用canvas来实现放大镜效果很简单，而且效果相对于传统的js实现，更加流畅，体验效果更好。下面来具体实现一下： 1、整体的页面布局： 两个画布，一个存放原图，一个存放放大区域的展示效果 <div> <canvas width="800" height="400" id="canvas1"></canvas> <canvas width=...
canvas绘制爱心的几种方法
weixin_34315485的博客
10-30 1203
第一种方法：桃心形公式 代码实现的一种方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用桃心形方程绘制爱心</title> </head> <body> <canvas&g...
canvas绘制爱心
风舞红枫的个人博客
03-05 2110
canvas绘制爱心
通过canvas画出爱心图案，表达你的爱意！
互联说
03-07 1116
通过canvas画出爱心图案，浏览器可以使用以下js代码，新建对象时，会自动呈现动画效果，代码可免费下载。 Vue可通过以下方式导入，代码在文末可下载： 点击免费下载源码
JavaScript图像放大镜效果实现方法详解
10-15
首先，我们先来看一个与图像放大镜效果无关的基础示例——使用JavaScript在Canvas上绘制四瓣花型图案。这个例子展示了如何利用数学公式生成图形。四瓣花的参数方程是`t=r*(1+sin(12*θ)/5)*(0.5+sin(4*θ)/2); x=t*...
js css样式放大镜
11-07
**标题解析：** "js css样式放大镜" 这个标题揭示了我们即将讨论的核心技术——使用JavaScript和CSS实现一种视觉效果，即放大镜功能。这个功能常见于电子商务网站的产品展示，用户可以通过它查看商品细节。 **描述...
JS放大镜(For Web)
10-28
在本项目“JS放大镜(For Web)”中，我们探讨的是如何使用JavaScript实现一种常见的网页功能——图片放大镜效果。这种效果常用于电子商务网站的产品展示或照片分享平台，它允许用户在不离开当前页面的情况下，查看...
放大镜移动放大文字flash动画特效
11-03
"放大镜移动放大文字flash动画特效"是Flash技术的一个具体应用，它展示了如何利用Flash来实现一种常见的用户界面功能——放大镜效果，该效果常见于电商网站或阅读软件中，用户可以通过它查看细节更清晰的文本。...
js放大镜效果京东商品显示效果
04-09
本项目聚焦于一个常见的前端功能——"js放大镜效果"，这种效果常见于电商网站如京东，用于增强用户对商品细节的观察体验。 "js放大镜效果"是指当鼠标悬停在商品图片上时，会在图片旁边或上方显示一个放大的区域，让...
Canvas实现放大镜效果完整案例分析(附代码)
01-18
本文主要记录 canvas 在图像、文字处理、离屏技术和放大镜特效的实现过程中使用到的API。先看下效果吧： 一张模糊的图片： 鼠标点击任意位置，产生放大效果： 哇塞~ 一个帅哥，哈哈哈哈~ 1、放大镜原理 实现效果：如上图，点击或点击滑动鼠标显示一个区域，区域中显示对应点击部分范围的放大清晰图片。那么问题就可以肢解为3部分： 1、如何在canvas（模糊图）上再画出另外一个canvas（清晰放大图）； 2、如何将canvas中显示的（清晰放大图）剪切出圆形区域。 3、如何在鼠标点击滑动的时候显示该区域；   2、显示模糊照片 其实一般的交互不是模糊照片，这里我只是为了夸张下效果，用了张模
JavaScript+HTML5 canvas实现放大镜效果完整示例
10-17
主要介绍了JavaScript+HTML5 canvas实现放大镜效果,结合完整实例形式分析了javascript+HTML5 canvas针对图片元素的获取、响应鼠标事件变换元素属性相关操作技巧,需要的朋友可以参考下
OpenGL完美的心形
05-28
可以参考本人博客： http://blog.csdn.net/kenden23/article/details/27338943 是一个使用OpenGL FreeGlut画的一个完美的心形。
canvas绘制爱心的几种方法总结(推荐)
11-26
第一种方法 代码实现的一种方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用桃心形方程绘制爱心</title> </head> <body> [removed] var canvas = document.querySelector('canvas'); var ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.in
心型动画（js实现）
10-14
纯js实现，直接双击打开，可以动态显示一颗心的形成轨迹。
canvas放大镜
Binlins的博客
11-30 429
准备两个canvas和一个放大镜元素；两个canvas，一个用于原图渲染，一个用于放大查看，放大镜元素跟随鼠标运动在原图渲染的canvas上绑定一个 ‘mousedown’ 事件，用于获取选中查看图片的坐标，同时在window上绑定’mousemove’事件在window上绑定 ‘mouseup’ 事件，用于解绑window的 ‘mousemove’ 事件window上绑定的’mousemove’事件用于监听鼠标的移动距离，从而计算出在放大查看的canvas上的坐标并实时绘图。
基于canvas实现的放大镜功能
雷佳佳的博客
04-09 549
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #myCanvas { border: 1px solid ...
可视化学习：实现Canvas图片局部放大镜
最新发布
dsgdauigfs的博客
03-29 1234
最近我在可视化课程中学习了如何在Canvas中利用像素处理来实现滤镜效果，在这节课程的结尾留了一道局部放大镜的题目，提示我们用像素处理的方式去实现这个效果，最终实现随着鼠标移动将图片局部放大，本着把学到的内容落地实践的想法，我就去思考了一番，但很不幸，我思考了好几天也没思考出结果，因为刚开始我想的一直是在一个Canvas上来操作，但是一来我对Canvas API还并不是很熟悉，二来我对像素处理还不够熟练，然后第三是如果原图的部分像素被处理了，那下一次放大就会有问题，因此我最终放弃了这个思路，选择了再增加一个
Canvas实现放大镜效果
Agoni_lxh的博客
10-29 873
引言：大家都在淘宝上买过东西吧，应该都知道鼠标放到照片上时会将图片放大，这就是接下来要写的放大镜效果。主要思路：其实很简单就是用drawImage这个方法来操作的，两个画布一个将原图绘制上去，另一个给一个定位absolute，随着鼠标的移动来改变它的left和top值来实现画布随着鼠标的移动而移动，并且将绘制原图的画布上用drawImage截取下来的绘制到定位的画布上以实现放大的效果。HTML没什么
canvas实现放大镜动画
04-26
1. 首先设置两个 canvas 元素，一个用于放大镜，一个用于原图展示。 2. 在展示原图的 canvas 上绘制需要展示的图片。 3. 在放大镜 canvas 上绘制放大镜的样式，包括放大镜的边框、大小等属性。 4. 通过监听鼠标...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值