照片上弄个放大镜效果图HTML,HTML5 canvas做的一个图片局部放大的效果

看到老外做HTML5的越来越多了,今天看到一个其中用HTML5做的效果不错,

是在canvas上画的圈,做放大器,并且监视了鼠标的相关事件,代码如下:

HTML部分

HTML5 canvas - Image zoomer | Script Tutorials

HTML5 canvas - Image zoomer

[url=http://www.script-tutorials.com/html5-canvas-image-zoomer/]Back to original tutorial on Script Tutorials[/url]

CSS部分:

*{

margin:0;

padding:0;

}

body {

background-color:#bababa;

color:#fff;

font:14px/1.3 Arial,sans-serif;

}

footer {

background-color:#212121;

bottom:0;

box-shadow: 0 -1px 2px #111111;

display:block;

height:70px;

left:0;

position:fixed;

width:100%;

z-index:100;

}

footer h2{

font-size:22px;

font-weight:normal;

left:50%;

margin-left:-400px;

padding:22px 0;

position:absolute;

width:540px;

}

footer a.stuts,a.stuts:visited{

border:none;

text-decoration:none;

color:#fcfcfc;

font-size:14px;

left:50%;

line-height:31px;

margin:23px 0 0 110px;

position:absolute;

top:0;

}

footer .stuts span {

font-size:22px;

font-weight:bold;

margin-left:5px;

}

.container {

color:#000;

margin:20px auto;

position:relative;

width:800px;

}

#panel {

border:1px #000 solid;

box-shadow:4px 6px 6px #444444;

cursor:crosshair;

}

script.js

// variables

var canvas, ctx;

var image;

var iMouseX, iMouseY = 1;

var bMouseDown = false;

var iZoomRadius = 100;

var iZoomPower = 2;

// drawing functions

function clear() { // clear canvas function

ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

}

function drawScene() { // main drawScene function

clear(); // clear canvas

if (bMouseDown) { // drawing zoom area

ctx.drawImage(image, 0 - iMouseX * (iZoomPower - 1), 0 - iMouseY * (iZoomPower - 1), ctx.canvas.width * iZoomPower, ctx.canvas.height * iZoomPower);

ctx.globalCompositeOperation = 'destination-atop';

var oGrd = ctx.createRadialGradient(iMouseX, iMouseY, 0, iMouseX, iMouseY, iZoomRadius);

oGrd.addColorStop(0.8, "rgba(0, 0, 0, 1.0)");

oGrd.addColorStop(1.0, "rgba(0, 0, 0, 0.1)");

ctx.fillStyle = oGrd;

ctx.beginPath();

ctx.arc(iMouseX, iMouseY, iZoomRadius, 0, Math.PI*2, true);

ctx.closePath();

ctx.fill();

}

// draw source image

ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height);

}

$(function(){

// loading source image

image = new Image();

image.onload = function () {

}

image.src = 'images/image.jpg';

// creating canvas object

canvas = document.getElementById('panel');

ctx = canvas.getContext('2d');

$('#panel').mousemove(function(e) { // mouse move handler

var canvasOffset = $(canvas).offset();

iMouseX = Math.floor(e.pageX - canvasOffset.left);

iMouseY = Math.floor(e.pageY - canvasOffset.top);

});

$('#panel').mousedown(function(e) { // binding mousedown event

bMouseDown = true;

});

$('#panel').mouseup(function(e) { // binding mouseup event

bMouseDown = false;

});

setInterval(drawScene, 30); // loop drawScene

});

一个在线效果在:

http://www.script-tutorials.com/demos/167/index.html

要用chrome,firefox,safri等浏览器看