html5 局部缩放,将图片中局部放大效果

我不清楚你的 bug, 我自己写了一份,你可以参考一下html>

*{

margin: 0;

padding: 0;

}

#wrap{

/*此处尺寸改为你图片的大小,画板也是如此

width: 478px;

height: 665px;

/*border: 1px solid red;*/

margin: 50px auto;

overflow: hidden;

position: relative;

}

#wrap>img{

position: relative;

}

#myCanvas{

position: absolute;

top: 0;

}

var wrap = document.getElementById('wrap');

var canvas = document.getElementById('myCanvas');

var img = document.querySelector('#wrap>img');

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

var x = 0;

var y = 0;

canvas.onmouseover = function () {

this.onmousemove = function (e) {

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

console.log('a')

var event = e || window.event;

x = event.clientX - wrap.offsetLeft;

y = event.clientY - wrap.offsetTop;

var imgBag = new Image();

imgBag.src = '../img/1.jpg';

//var  imgs = context.cr

context.drawImage(imgBag,x-50,y-50,100,100,x - 100,y - 100,200,200)

}

}