var canvas,ctx;
var w,h,t=0;
var beforeImg = 'soniko.png';
var afterImg = 'aheko.png';
$(function(){
  canvas = document.createElement('canvas');
  var wrap = document.getElementById('demo');
  wrap.appendChild(canvas);
  ctx = canvas.getContext('2d');
  w = document.body.clientWidth;
  h = document.body.clientHeight;
  canvas.width = w;
  canvas.height = h;

  $('#canvas').css({
    'background-color' : '#ffffff'
  }).click(function(){
    drawClick();
  });

  setInterval(function(){
    drawCircle();
    t++;
  }, 100);
  $('#button').click(function(){
    drawClear();
  });
});

var balls = [
  {
    x:240,
    y:240,
    r:30,
    imgPath: beforeImg
  },

];
  for(var i=0;i<80;i++){
    balls.push({
      imgPath: beforeImg
    });
  }

  balls.forEach(function(v){
    v.img =  new Image();
    v.img.src = v.imgPath;
  });


  balls.forEach(function(v){
    v.r = 30;
    v.x = 120 + Math.floor(Math.random() * 320);
    v.y = 120 + Math.floor(Math.random() * 320);
  });
  balls = balls.reverse();

function drawCircle(x, y){
  ctx.clearRect(0,0,w,h);
  balls.forEach(function(v){
    var hue =  Math.floor(Math.random() * 360);
    var hsl  = [hue,'100%','50%'].join(',');
    v.x = v.x + Math.floor(Math.random() * 6)-2.5;
    v.y = v.y + Math.floor(Math.random() * 6)-2.5;
    //var x =  x || Math.floor(Math.random() * w);
    //var y =  y || Math.floor(Math.random() * h);
    if(t>30 && t<180 && Math.floor(Math.random() * 50)===0){
      v.img.src = afterImg;
    }
    if(t>180 && Math.floor(Math.random() * 50)===0){
      v.img.src = beforeImg;
    }
    var r =  Math.floor(Math.random() * w/20)+w/60;
    ctx.fillStyle = 'hsl(' + hsl + ')';

    ctx.save();
    ctx.beginPath();
    ctx.arc(v.x, v.y, v.r, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.clip();

    ctx.arc(v.x, v.y, v.r, 0, 2*Math.PI, true);
    ctx.fill();
    ctx.drawImage(v.img, 0,0, v.img.width, v.img.height, v.x-v.r, v.y-v.r, v.r*2, v.r*2);


    ctx.beginPath();
    ctx.arc(v.x, v.y, v.r, 0, Math.PI * 2, true);
    ctx.clip();
    ctx.closePath();
    ctx.restore();
  });
}

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-neta/js-canvas-ball-move/