<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
body {
height: 1000px;
}
</style>
</head>
<body>
<div style="position: relative; 300px; height: 100px;">
<canvas id="rect" width="300" height="100" style="position:absolute;left:0;top:0;"></canvas>
<canvas id="arc" width="300" height="100" style="position:absolute;left:0;top:0;"></canvas>
</div>
<script type="text/javascript">
function WipeImg(rect, arc) {
var canvas = document.getElementById(rect);
var context = canvas.getContext("2d");
var img = new Image();
img.onload = function () {
context.drawImage(this, 0, 0, canvas.width, canvas.height);//将图片放置画布上
}
img.src = '../js_面向对象/image/bdlogo.gif';//图片地址
var canvas2 = document.getElementById(arc);
var context2 = canvas2.getContext("2d");
context2.fillStyle = "#ccc";
context2.fillRect(0, 0, 300, 100);
context2.fill();
context2.globalCompositeOperation = "destination-out";//源图像是透明的，目标图像部分被显示出来
var isMousedown = false;
canvas2.addEventListener("mousedown", function (e) {
isMousedown = true;
var docEle = document.documentElement;
var x = (e.clientX) ;+ docEle.scrollLeft - docEle.clientLeft;
var y = (e.clientY) + docEle.scrollTop - docEle.clientTop;
//可以利用createRadialGradient给定指定值去画渐变效果
//var radgrad = context2.createRadialGradient(x, y, 0, x, y, 30);
//radgrad.addColorStop(0, 'rgba(0,0,0,0.6)');
//radgrad.addColorStop(1, 'rgba(255,255,255,0)');
//context2.fillStyle = radgrad;
context2.fillStyle = "#fff";
context2.beginPath();
context2.arc(x, y, 30, 0, Math.PI * 2, true);
context2.closePath();
context2.fill();
canvas2.addEventListener("mousemove", function (e) {
if (!isMousedown) return false;
var docEle = document.documentElement;
var x = (e.clientX) + docEle.scrollLeft - docEle.clientLeft;
var y = (e.clientY) + docEle.scrollTop - docEle.clientTop;
var radgrad = context2.createRadialGradient(x, y, 0, x, y, 30);
radgrad.addColorStop(0, 'rgba(0,0,0,0.6)');
radgrad.addColorStop(1, 'rgba(255,255,255,0)');
context2.fillStyle = radgrad;
context2.beginPath();
context2.arc(x, y, 30, 0, Math.PI * 2, true);
context2.closePath();
context2.fill();
}, false);
canvas2.addEventListener("mouseup", function (e) {
isMousedown = false;
}, false);
}, false);
}
WipeImg("rect", "arc");
</script>
</body>
</html>