canvas实现放大镜功能

采用canvas实现放大镜功能，只需要使用一个方法。。。
先奉上效果图：

先介绍该方法：
drawImage（）
这个方法有三种使用情况：
1、drawImage(img,x,y)
三个参数，第一个参数当然是img元素了，也可以是video元素或者Image对象，x 、y 为图片绘制时在画布中的起始坐标，图像大小与原图相同。
2、drawImage(img , x , y , w , h)
与第一中情况相比，多了两个参数，分别代表所绘图像的宽度和高度。
3、drawImage(img , sx , sy , sw , sh , dx , dy , dw , dh);
9个参数，分别是：图像元素，被复制区域在原画布中的起始横坐标、被复制区域在原画布中的起始纵坐标、被复制区域的宽度、被复制区域的高度、复制后目标图像在画布中的起始横坐标、复制后目标图像在画布中的起始纵坐标、复制后目标图像的宽度、复制后目标图像的高度。
因此这种情况下可以将某幅图像的局部区域复制到另一个画布中的某个位置。
直接来代码了：

<!DOCTYPE html>
<html>
<head><title>index</title><style type="text/css">body{margin: 0;padding: 0;position: relative;}#imgcan{display: block;cursor: pointer;}#glasscan{display: none;border:1px solid #ccc;border-radius:101px;-webkit-border-radius:101px;-o-border-radius:101px;-moz-border-radius:101px;position: absolute;}</style>
</head>
<body>
<canvas id="imgcan" width="800" height="500"></canvas>
<canvas id="glasscan" width="200" height="200"></canvas>
<span id="show"></span>
</body>
<script type="text/javascript">var imgcan = document.getElementById("imgcan"),glasscan = document.getElementById("glasscan"),imgContext = imgcan.getContext("2d"),glassContext = glasscan.getContext("2d"),img = new Image(),mouse = captureMouse(imgcan);img.src = "1.jpg";img.onload = function(){imgContext.drawImage(img,0,0);}//获取元素内鼠标位置function captureMouse(element){var  mouse = {x:0 , y:0};element.addEventListener('mousemove' , function(event){var x , y;if(event.pageX || event.pageY){x = event.pageX;y = event.pageY;}else{x = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);y = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);}x -= element.offsetLeft;y -= element.offsetTop;mouse.x = x;mouse.y = y;} , false)return mouse;}//给画布绑定鼠标移动事件imgcan.onmousemove = function(){glassContext.clearRect(0,0,glasscan.width,glasscan.height);glasscan.style.left = mouse.x + 10 + 'px';glasscan.style.top = mouse.y + 10 + 'px';glasscan.style.display = "block";document.getElementById("show").innerText = mouse.x + '|' + mouse.y;     //显示鼠标位置var drawWidth = 50,drawHeight = 50;glassContext.drawImage(img,mouse.x-drawWidth/4,mouse.y-drawHeight/4,drawWidth,drawHeight,0,0,drawWidth*4,drawHeight*4);     //实现放大镜};//绑定鼠标移出事件imgcan.onmouseout = function(){glasscan.style.display = "none";}
</script>
</html>

OK~。

canvas实现放大镜功能相关推荐

html中放大镜案列,Canvas实现放大镜效果完整案例分析(附代码)
本文主要记录 canvas 在图像.文字处理.离屏技术和放大镜特效的实现过程中使用到的api.先看下效果吧: 一张模糊的图片: 鼠标点击任意位置,产生放大效果: 哇塞~ 一个帅哥,哈哈哈哈~ 1.放大 ...
html5时间画布走动,javascript+HTML5 canvas绘制时钟功能示例
本文实例讲述了javascript+HTML5 canvas绘制时钟功能.分享给大家供大家参考,具体如下: 效果如下: 代码: www.jb51.net canvas绘制时钟 div{text-ali ...
[COCOS2DX-LUA]0-001.利用ClippingNode实现放大镜功能
用过Iphone的都知道,Iphone在定位光标位置的时候会把内容进行放大,这样我们就能很快的把光标移动到指定的位置.那么在我们的Cocos2dX的游戏中,怎么可以实现这种功能呢.起先我就是想起了Ip ...
php怎么实现弹幕,HTML如何利用canvas实现弹幕功能
本篇文章主要介绍HTML如何利用canvas实现弹幕功能,感兴趣的朋友参考下,希望对大家有所帮助. 简介最近在做大作业的时候需要做一个弹幕播放器.借鉴了一下别人的源码自己重新实现了一个,演示如下主 ...
unity实现小地图和放大镜功能
在project中右键创建render Texture,然后右键在UI里创建RawImage,把render Texture拖进去然后创建一个相机把render Texture拖进去然后左上角就出 ...
基于canvas剪辑区域功能实现橡皮擦效果
这篇文章主要介绍了基于canvas剪辑区域功能实现橡皮擦效果,非常不错,具有参考借鉴价值,需要的朋友可以参考下这是基础结构没什么好说的 ?<!DOCTYPE html> <htm ...
巧用canvas实现画板功能，使用画笔在图片上涂画，橡皮擦可擦除涂画，并保存
canvas 是HTML5的元素,使用JavaScript 在网页上绘制图像. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 而如果想实现画笔在画板涂画画笔在图片上涂画,橡皮擦 ...
微信小程序canvas实现签名功能
微信小程序canvas实现签名功能在微信小程序项目中,开发模块涉及到手写签名功能,微信小程序canvas闪亮登场文章目录微信小程序canvas实现签名功能前言一.微信小程序canvas实现签 ...
WIndows 10 MFC 调用放大镜功能
1.首先判断是否为Win 10系统:这个需要添加Version.lib 库 BOOL IsFileVersionWindows10OrGreater()//判断是否为Win10系统,Version.l ...

canvas实现放大镜功能

canvas实现放大镜功能相关推荐

最新文章

热门文章