最初我想做的是将模糊的图像放在清晰的同一图像之上。然后让另一个元素(div 框)在显示清晰图像的模糊图像上进行动画处理。从而产生像一副眼镜一样的效果。现在我知道这可以通过 html5 Canvas 实现，但是我不太了解这个 api 以及如何实现它。我正在努力做两件事。
第一件事是更改被删除的灰色 fillColor，这样您就可以看到它后面的图像，以及模糊的图像。现在我尝试执行 drawImage() 函数。但似乎无法让它与我现有的代码一起工作。如有任何建议或示例，我们将不胜感激。
第二件事是让动画 div 执行“删除”而不是用户执行鼠标按下功能。
第三件事也是最后一件事(更担心只是弄清楚前两个)，是在 div 移动后图像返回到重新模糊图像。
我也乐于接受更好方法的想法。我非常感谢花时间帮助自己。
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
动画 globalAlpha。
注意:您不能使用 HTML 元素在
关于javascript - 使用动画元素在另一个图像之上绘制图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41863253/