刚毅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)
}
}