canvas知识02:图片放大镜效果
效果截图:
JS代码:
<script>
// 初始化canvas01和上下文环境
var cav01 = document.getElementById('cav01');
var cxt01 = cav01.getContext('2d'); // 初始化canvas02和上下文环境
var cav02 = document.getElementById('cav02');
var cxt02 = cav02.getContext('2d'); //初始化image对象和缩放比例
var oImg = new Image();
var scale; window.onload = function(){ //设置图片路径
oImg.src = 'images/02.jpg'; //设置主canvas的宽高
cav01.width = 800;
cav01.height = 500; oImg.onload = function(){ //设置离屏canvas的宽高,与原始图片的宽高一致
cav02.width = oImg.width;
cav02.height = oImg.height; //初始化鼠标按下状态和设置缩放比例
var isMouseDown = false;
scale = cav02.width/cav01.width; //绘制图像到canvas,第二个canvas初始时是隐藏的
cxt01.drawImage( oImg, 0, 0, cav01.width, cav01.height);
cxt02.drawImage( oImg, 0, 0, cav02.width, cav02.height); //鼠标按下状态
cav01.onmousedown = function(e){ //获取鼠标相对于canvas的坐标
var pos = getMousePos(e.clientX,e.clientY); //阻止鼠标默认事件
e.preventDefault(); //调用绘制放大镜方法
drawFilterImg(true,pos); //把isMouseDown标记设置为true;
isMouseDown = true;
} //鼠标移动状态
cav01.onmousemove = function(e){
//获取鼠标相对于canvas的坐标
var pos = getMousePos(e.clientX,e.clientY);
e.preventDefault(); //根据isMouseDown状态,调用绘制放大镜方法
if(isMouseDown == true ){
drawFilterImg(true,pos);
}
} // 鼠标抬起状态
cav01.onmouseup = function(e){ //获取鼠标相对于canvas的坐标
var pos = getMousePos(e.clientX,e.clientY);
e.preventDefault(); //调用绘制放大镜方法
drawFilterImg(false); //把isMouseDown状态设置为false
isMouseDown = false;
}
} // 绘制放大镜方法 flag:用于判断是否开始绘制,pos:鼠标相对于canvas画布的坐标
function drawFilterImg(flag,pos){ //每次调用先清空canvas画布,避免出现重复图像
cxt01.clearRect( 0, 0, cav01.width, cav01.height);
cxt01.drawImage( oImg, 0, 0, cav01.width, cav01.height); //定义放大镜半径
var r = 100; if(flag == true){
//调用绘制放大区域方法
drawFilterImgCon(pos,r);
}
}
//绘制放大区域方法
function drawFilterImgCon(pos,r){ //大图图像上开始剪切的坐标
var sx = pos.x*scale - r;
var sy = pos.y*scale - r; //画在canvas上的坐标
var dx = pos.x - r;
var dy = pos.y - r; cxt01.save(); cxt01.strokeStyle = 'rgba(0,0,0,0.3)';
cxt01.lineWidth = 2; cxt01.beginPath();
cxt01.arc( pos.x, pos.y, r, 0 , Math.PI*2);
cxt01.stroke();
cxt01.clip(); cxt01.drawImage( cav02, sx, sy, r*2, r*2, dx, dy, r*2, r*2); cxt01.restore();
} //定义获取鼠标在canvas上位置的方法
//x:鼠标距离窗口的x坐标,y:鼠标距离窗口的y坐标
function getMousePos(x,y){
var oCanPos = cav01.getBoundingClientRect();
return {
x: x-oCanPos.left,
y: y-oCanPos.top
}
}
} </script>
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas图片放大镜</title>
<style>
body{ background-color: #333; padding-top: 60px; }
#cav01{ display: block; margin: 0 auto; }
#cav02{ display: none;}
</style>
</head>
<body>
<!-- 主canvas -->
<canvas id="cav01" style="border:1px solid #666;"></canvas>
<!-- 离屏canvas,用于放置放大的图片,默认状态为隐藏 -->
<canvas id="cav02"></canvas>
</body>
</html>
canvas知识02:图片放大镜效果的更多相关文章
- WPF设置VistualBrush的Visual属性制作图片放大镜效果
原文:WPF设置VistualBrush的Visual属性制作图片放大镜效果 效果图片:原理:设置VistualBrush的Visual属性,利用它的Viewbox属性进行缩放. XAML代码:// ...
- Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果
Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...
- 原生javascript实现图片放大镜效果
当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...
- 【Demo】jQuery 图片放大镜效果——模仿淘宝图片放大效果
实现功能: 模仿淘宝图片放大效果,鼠标移动到小图片的某一处,放大镜对应显示大图片的相应位置. 实现效果: 实现代码: <!DOCTYPE html> <html> <he ...
- javascript图片放大镜效果展示
javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...
- jQuery实现图片放大镜效果
实现图片放大镜的原理: 给放大镜元素一个对应的html元素为<div class='right'> 设置这个div的宽高固定为某个值(350px,350px) 设置div的css为超出部分 ...
- Canvas + JavaScript 制作图片粒子效果
首先看一下源图和转换成粒子效果的对比图: 左侧图片为源图,右侧图片为粒子效果图.该效果是在Canvas画布上制作的.将图片制作成粒子效果相对而言是比较简单的.重点了解两个知识点即可 1:图 ...
- 用css3的cursor:zoom-in/zoom-out实现微博看图片放大镜效果
1.前言 CSS3的出现解决了很多让人头疼的问题,至少我想很多童鞋都这样认为.css3的cursor属性大家用的应该是非常的多的,我想用的比较多的像cursor:pointer;cursor:help ...
- Jquery插件开发之图片放大镜效果(仿淘宝)
原网转载地址:http://www.cnblogs.com/hnvvv/archive/2011/11/19/2255197.html 需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部 ...
随机推荐
- ansible结合SHELL搭建自己的CD持续交付系统
一. 设计出发点 因公司业务面临频繁的迭代上线,一日数次.仅仅依靠手工效率过低且易出错. 考虑搭建一套可以满足现有场景的上线系统. 二 .为何采用ansible+shell方式 1.可控性(完全自主拥 ...
- FIFO的使用场景
(1) 数据的缓冲.如模型图所示,如果数据的写入速率高,但间隔大,且会有突发;读出速率小,但相对均匀.则通过设置相应深度的FIFO,可以起到数据暂存的功能,且能够使后续处理流程平滑,避免前级突发时,后 ...
- table调整td宽度整理-完美解决--费元星前端
个人整理例子,留下做个备份 最终重要的几句话 0.日期格式 format="ognl:dateFormat" <td align="center"> ...
- 通过数据库恢复SharePoint网站
SharePoint网站一般包含很多个数据库,最主要的有3个,分别是SharePoint_Admin_Content(管理中心数据库),SharePoint_Config(配置数据库)和 ...
- restAssured + TestNG测试接口,以下是一个get 请求。
package Elaine.Test.G.APITest; import org.testng.Assert;import org.testng.annotations.BeforeTest;imp ...
- flask - 1
from flask import Flask app = Flask(__name__) @app.route('/') def hello_world(): return 'Hello, Worl ...
- HDU 5794 A Simple Chess Lucas定理+dp
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5794 题意概述: 给出一个N*M的网格.网格上有一些点是障碍,不能经过.行走的方式是向右下角跳马步.求 ...
- UGUI 代码 动态添加 Event Trigger 的事件
Additionally, if you need more than just the events provided by default, I'd suggest instead attachi ...
- HDU 1398 Square Coins 整数拆分变形 母函数
欢迎参加——BestCoder周年纪念赛(高质量题目+多重奖励) Square Coins Time Limit: 2000/1000 MS (Java/Others) Memory Limit ...
- neutron DVR
DVR 简介 DVR 提出的背景 在 Neutron 的网络环境中,跨子网的虚机通信是需要通过 Neutron 的路由器.这既包括不同子网的虚拟机之间的通信,又包括虚拟机与外网之间的通信.在 DVR ...