h5 img js 点击图片放大_jquery – HTML5 Canvas调整图像点击放大

繁荣！我将一堆StackOverflow引用组合成适用于你的东西：

http://jsfiddle.net/CMse5/1/

这是代码：

HTML：

CSS：

canvas {

border: 1px solid black;

}

JS：

$( document ).ready( function() {

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

var scale = 1.5;

var originx = 0;

var originy = 0;

var imageObj = new Image();

imageObj.src = 'http://placehold.it/300x300';

function draw(){

// From: http://goo.gl/jypct

// Store the current transformation matrix

context.save();

// Use the identity matrix while clearing the canvas

context.setTransform(1, 0, 0, 1, 0, 0);

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

// Restore the transform

context.restore();

// Draw on transformed context

context.drawImage(imageObj, 0, 0, 300, 300);

}

setInterval(draw,100);

canvas.onmousewheel = function (event){

var mousex = event.clientX - canvas.offsetLeft;

var mousey = event.clientY - canvas.offsetTop;

var wheel = event.wheelDelta/120;//n or -n

//according to Chris comment

var zoom = Math.pow(1 + Math.abs(wheel)/2 , wheel > 0 ? 1 : -1);

context.translate(

originx,

originy

);

context.scale(zoom,zoom);

context.translate(

-( mousex / scale + originx - mousex / ( scale * zoom ) ),

-( mousey / scale + originy - mousey / ( scale * zoom ) )

);

originx = ( mousex / scale + originx - mousex / ( scale * zoom ) );

originy = ( mousey / scale + originy - mousey / ( scale * zoom ) );

scale *= zoom;

}

} );

此外,您还提到了以平滑方式动画缩放的动画.为此,您需要简化每帧的缩放.因此,在您的绘图功能中,您希望在原始比例与新比例之间放松每个帧.您肯定希望更改为requestAnimationFrame,以便获得更好的帧速率.

使用canvas / DOM混合可能更简单,并在图像上使用CSS3转换和动画,它可以为您完成所有缓动.如果需要,您可以覆盖任何必要的画布.