最初我想做的是将一张模糊的图像放在同一张清晰的图像上。然后具有另一个元素(div框)，该元素在显示清晰图像的模糊图像上设置动画。因此给人的感觉就像是一副眼镜。。现在我知道这可以通过html5画布实现，但我不太了解这个api以及如何实现它。有两件事我很难做到。
第一件事是改变被擦除的灰色fillColor，这样你就可以看到它后面的图像，以及模糊的图像。现在我已经尝试执行drawImage()函数。但似乎无法使它与我现有的当前代码一起工作。任何建议或例子都将不胜感激。
第二件事是让动画div执行"擦除"，而不是用户执行鼠标向下功能。
第三件也是最后一件事(更担心的是弄清楚前两件事)，是在div移动后，图像返回到reblur图像。
我也对更好的方法持开放态度。我非常感谢花时间帮助自己。
animateLense();
function animateLense() {
$("#lense").animate({
left: 200,
top: 150
}, 2000 );
}
(function() {
// Creates a new canvas element and appends it as a child
// to the parent element, and returns the reference to
// the newly created canvas element
function createCanvas(parent, width, height) {
var canvas = {};
canvas.node = document.createElement('canvas');
canvas.context = canvas.node.getContext('2d');
canvas.node.width = width || 100;
canvas.node.height = height || 100;
parent.appendChild(canvas.node);
return canvas;
}
function init(container, width, height, fillColor) {
var canvas = createCanvas(container, width, height);
var ctx = canvas.context;
// define a custom fillCircle method
ctx.fillCircle = function(x, y, radius, fillColor) {
this.fillStyle = fillColor;
this.beginPath();
this.moveTo(x, y);
this.arc(x, y, radius, 0, Math.PI * 2, false);
this.fill();
};
ctx.clearTo = function(fillColor) {
ctx.fillStyle = fillColor;
ctx.fillRect(0, 0, width, height);
};
ctx.clearTo(fillColor || "#ddd");
// bind mouse events
canvas.node.onmousemove = function(e) {
if (!canvas.isDrawing) {
return;
}
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
var radius = 10; // or whatever
var fillColor = '#ff0000';
ctx.globalCompositeOperation = 'destination-out';
ctx.fillCircle(x, y, radius, fillColor);
};
canvas.node.onmousedown = function(e) {
canvas.isDrawing = true;
};
canvas.node.onmouseup = function(e) {
canvas.isDrawing = false;
};
// bind mouse end
}
var container = document.getElementById('canvas');
init(container, 300, 250, '#ddd');
})();.canvas {
position: absolute;
width: 300px;
height: 250px;
left: 0px;
top: 0px;
background: url("http://www.atlantisbahamas.com/media/Things%20To%20Do/Water%20Park/Beaches/Gallery/waterpark_covebeach.jpg");
background-size: 300px, 250px
}
.lense {
position: absolute;
height: 50px;
width: 50px;
border: 2px black solid;
top: 0;
left: 0;
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="canvas" id="canvas">
<div class="lense" id="lense"></div>
</div>
</body>
</html>只需在同一位置绘制两张图像。
在第一个上面画第二个：
ctx.globalAlpha = 0.5; // Set to animated value
为全局Alpha制作动画。
注意：您不会在<画布>使用HTML元素。您必须通过JavaScript加载它们，并使用drawImage方法。