console
var draw = function() {
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
var canWid = can.width, canHei = can.height;
var img = new Image();
img.src = 'https://img.alicdn.com/tps/TB1m7AtNXXXXXXhXXXXXXXXXXXX-287-260.png';
img.onload = function () {
ctx.drawImage(img, 0, 0, canWid, canHei);
};
var device = /android|iphone|ipad|ipod|webos|iemobile|opear mini|linux/i.test(navigator.userAgent.toLowerCase());
var startEvtName = device ? 'touchstart' : 'mousedown';
var moveEvtName = device ? 'touchmove' : 'mousemove';
var endEvtName = device ? 'touchend' : 'mouseup';
function render(e){
var x = device ? e.touches[0].clientX : e.offsetX;
var y = device ? e.touches[0].clientY : e.offsetY;
ctx.beginPath();
ctx.globalCompositeOperation = 'destination-out';
ctx.arc(x, y, 20, 0, Math.PI*2);
ctx.fill();
}
can.addEventListener(startEvtName,function(){
document.getElementById('figure').style.display = 'none';
can.addEventListener(moveEvtName,render,false);
}, false);
can.addEventListener(endEvtName,function(){
can.removeEventListener(moveEvtName,render,false);
}, false);
};
draw();
<canvas id="canvas" width="336" height="410" style="background: url(https://img.alicdn.com/tps/TB1p7L.NXXXXXa9XFXXXXXXXXXX-336-410.png"></canvas>
<div id="figure" class="figure moveFrame"></div>
.figure {
width: 80px;
height: 50px;
background: url(https://img.alicdn.com/tps/TB1YVkaNXXXXXaLXFXXXXXXXXXX-261-200.png) no-repeat;
background-size: 100% 100%;
position: absolute;
left: 350px;
top: 200px;
}
@keyframes moveFrame {
0% {
left: 300px;
}
100% {
left: 350px;
}
}
.moveFrame {
animation: moveFrame 1s ease-in infinite alternate;
}