<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
canvas {
position: absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<img src="img/2.jpg">
<canvas id="canvas" width="400" height="600"></canvas>
<script type="text/javascript">
var oC = document.getElementById("canvas");
var ctx = oC.getContext("2d");
oC.onmousedown = function() {
document.onmousemove = function(ev) {
var ev = ev || window.event;
var x = ev.clientX - 50;
var y = ev.clientY - 50;
var img = new Image();
img.src = "img/2.jpg";
img.onload = function() {
ctx.clearRect(0, 0, 400, 600);
// 九个参数是 图像 图像截取的位置 图像截取的大小 画布上的绘制位置 绘制大小
ctx.drawImage(img, x+25, y+25, 50, 50, x, y, 100, 100);
ctx.globalCompositeOperation = "destination-atop";
ctx.beginPath();
ctx.arc(x+50,y+50,50,0,Math.PI*2,false);
ctx.fill();
};
}
document.onmouseup = function() {
document.onmousemove = null;
ctx.clearRect(0, 0, 400, 600);
}
}
</script>
</body>
</html>