0
最初は、ぼかし画像を透明な画像の上に置きます。次に、鮮明な画像を示すぼやけた画像全体にアニメーション化する別の要素（divボックス）があります。したがって、このような効果を与えるのはメガネです。これはhtml5キャンバスで実現できますが、私はこのapiとそれを達成するための知識はあまり知られていません。私がやっていることには苦労していることが2つあります。アニメーション要素で別の画像の上に画像を描画する
まず、灰色のfillColorが消去されて、その後ろの画像がぼやけて見えるようにすることです。今私はdrawImage（）関数を実行しようとしました。しかし、それが私が持っている現在のコードで動作するように見えることはできません。どのような提案や例があれば幸いです。
もう1つは、マウスダウン機能を実行するユーザーの代わりに、アニメーション化したdivで「消去」を行うことです。
3番目と最後のこと（最初の2つが分かり次第気になります）は、画像が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>