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程序设计有所帮助。