html5 放大镜效果,JavaScript+HTML5 canvas实现放大镜效果完整示例
本文实例讲述了JavaScript+HTML5 canvas实现放大镜效果。分享给大家供大家参考,具体如下:
效果:
www.jb51.net canvas放大镜
#copycanvas {
border: 1px solid #000;
display: none;
}
#square {
width: 90px;
height: 90px;
background-color: #cc3;
border: 1px solid #f00;
opacity: 0.5;
position: absolute;
z-index: 999;
display: none;
cursor: crosshair;
}
var canvas = document.getElementById('canvas'), //获取canvas对象
context = canvas.getContext('2d'), //获取上下文
copycanvas = document.getElementById('copycanvas'), //获取copycanvas
copycontext = copycanvas.getContext('2d'),
square = document.getElementById('square'), //获取透明框
squaredata = {}, //用来保存选择框数据
box = canvas.getBoundingClientRect();
//getBoundingClientRect方法可以获取元素上、下、左、右分别相对浏览器的坐标位置
//创建图像对象,并加载
image = new Image();
image.src = "3.jpg";
image.onload = function(){
context.drawImage(image,0,0,canvas.width,canvas.height);
};
canvas.onmouseover = function(e){
var x = e.clientX, //获取鼠标实时坐标
y = e.clientY;
createSquare(x,y); //保存透明选择框属性
};
window.onmousemove = function(e){
var x = e.clientX,
y = e.clientY;
//判断鼠标是否移出canvas
if(x >= canvas.offsetLeft && x <= canvas.offsetLeft + canvas.width &&
y >= canvas.offsetTop && y <= canvas.offsetTop + canvas.height){
createSquare(x,y);
}else{
hideSquare();
hideCanvas();
}
}
function showSquare(){
square.style.display = 'block';
}
function hideSquare(){
square.style.display = 'none';
}
function showCanvas(){
copycanvas.style.display = "inline";
}
function hideCanvas(){
copycanvas.style.display = "none";
}
function createSquare(x,y){
//控制选择框不移动出canvas
x = x - 45 < canvas.offsetLeft ? canvas.offsetLeft:x - 45;
y = y - 45 < canvas.offsetTop ? canvas.offsetTop:y - 45;
x = x + 90 < box.right ? x:box.right - 90;
y = y + 90 < box.bottom ? y:box.bottom - 90;
squaredata.left = x;
squaredata.top = y;
moveSquare(x,y);
}
function moveSquare(x,y){
square.style.left = x + "px";
square.style.top = y + "px";
showCanvas();
showSquare();
copy();
}
function copy(){
copycontext.drawImage(
canvas,
squaredata.left - box.left,
squaredata.top - box.top,
90,
90,
0,
0,
copycanvas.width,
copycanvas.height
);
}
感兴趣的朋友可使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试一下运行效果。
希望本文所述对大家JavaScript程序设计有所帮助。
html5 放大镜效果,JavaScript+HTML5 canvas实现放大镜效果完整示例相关推荐
- html弧形列表效果,JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
本文实例讲述了JavaScript+html5 canvas绘制的圆弧荡秋千效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: demo #canvas { margin:50 ...
- html动画之制作烟花效果,JavaScript实现烟花绽放动画效果
先编写一个烟花绽放的动画效果. 放烟花时,一个烟花可分为两个阶段:(1)烟花上升到空中:(2)烟花炸开成碎片,炸开的碎片慢慢消散. 为此抽象出两个对象类:Firework和Particle.其中,Fi ...
- html5字体加重,javascript – Html5画布字体重量渲染比它应该重得多
我是html5画布的新手,我遇到了试图渲染文本的问题.我在我的代码中设置了文本应该在Gotham中以"常规"权重呈现,但它似乎呈现为粗体甚至更重.我附上了一段代码和两个屏幕截图,说 ...
- html5游戏开发马赛克对比,canvas实现图片马赛克的示例代码
1. 原生canvas实现用到的API 1) getContext(contextID) ---返回一个用于在画布上绘图的环境 Canvas.getContext('2d') // 返回一个 Canv ...
- html横向导航栏滑动效果,JavaScript实现滑动导航栏效果
本文实例为大家分享了js实现滑动导航栏效果的具体代码,供大家参考,具体内容如下 *{ margin: 0; padding: 0; } .navScroll{ position: relative; ...
- html自动弹出窗效果,JavaScript实现弹出窗口效果
本文实例为大家分享了JavaScript实现弹出窗口的具体代码,供大家参考,具体内容如下 思路 1.总体使用两个div,一个作为底层展示,一个做为弹出窗口: 2.两个窗口独立进行CSS设计,通过dis ...
- 笑脸html5,8款给力HTML5/CSS3应用插件 可爱的HTML5笑脸
1.HTML5/CSS3实现笑脸动画 非常可爱 今天我们要分享一款基于纯CSS3实现的笑脸动画,我们只要在面部滑动鼠标,即可让人物的眼睛嘴巴动起来,实现微笑的效果,还挺可爱的. 2.jQuery+Ht ...
- canvas整体放大_【HTML5】Canvas 实现放大镜效果
图片放大镜 效果 原理 首先选择图片的一块区域,然后将这块区域放大,然后再绘制到原先的图片上,保证两块区域的中心点一致, 如下图所示: 初始化 获得 canvas 和 image 对象,这里使用 标签 ...
- html语言玫瑰花代码,javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
本文实例讲述了javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果.分享给大家供大家参考.具体如下: 下面的玫瑰绘制用到了HTML 5的canvas,所以你的浏览器需要支持HTM ...
最新文章
- 电机贴上锡纸到底有没有作用?
- designer.cs 删除后怎么恢复?(复制aspx修改名字后重新生成页面)
- 内网通免广告_3D打印进军广告发光字领域,成为名副其实的智能打印工厂
- 只有一个显示器但是显示两个显示器_小米34寸曲面显示器深度体验 办公体验极佳 但是还有个大弱点...
- mysql stack is full_mysql优化之表的优化与列类型选择
- HTML中添加meta http-equiv=X-UA-Compatible content=IE=edge,chrome=1
- myeclipse中配置maven
- Exchange 2010安装必要条件
- hdu 2642 Stars 树状数组
- Ubuntu 16.04 LTS 下Nginx的编译安装与启动
- windows下使用iconv命令批量原地转码文件
- java过滤器不管用_java中过滤器不起作用的原因
- 如何官方的发布通知(互亿无线)?
- Holt-Winters双指数平滑的java实现
- apicloud aui 做底部导航
- 汇智动力软件测试问题,汇智动力—测试工程师都是怎么写测试用例的?
- css 判断是iphone4s iphone5 加载不同样式
- 人像抠图软件哪个好?这些软件助你实现人像抠图
- Excel 有哪些可能需要熟练掌握而很多人不会的技能2
- 人人玩棋牌电玩城全套源码搭建下载教程
热门文章
- iOS安全之防止手机截屏/录屏导致泄密的方案: iOS11之后防止用户录屏方案、基于DRM防截屏/录屏 | 蓄力计划
- Excel 随机生成数字字母字符串(密码)
- android:强大的图片下载和缓存库Picasso
- (转)整合Struts2+JasperReport Web报表应用示例
- dnf服务器未响应win7,win7系统dnf经常未响应的解决方法
- 用python编写能够分析股票行情的程序
- 修改Android主题里Button的默认背景颜色
- J1_22_1,J1_22_2,J1_22_3.
- iOS性能优化——卡顿优化
- 纪录win10系统wifi标志消失问题解决