剛毅87

我不清楚你的 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)

}

}

總結(jié)

以上是生活随笔為你收集整理的Css中图片局部放大,将图片中局部放大效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。