SOURCE

console 命令行工具 X clear

                    
>
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;
}