var canvas,ctx;
var w,h;
var t = 0;
var cx,cy,x,y;

var img = new Image();
img.src = 'homomi.png';
var img2 = new Image();
img2.src = 'kabutomushi001.png';
//img2.src = 'monchara08.gif';



$(function(){
  canvas = document.createElement('canvas');
  ctx = canvas.getContext('2d');
  w = document.body.clientWidth;
  h = document.body.clientHeight;

  cx = w/2;
  cy = h/2;

  canvas.width = w;
  canvas.height = h;
  $('#demo').append(canvas);

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

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



function drawClick(){
  console.dir(event);
  drawCircle(event.x, event.y);
}

function drawClear(){
  ctx.fillStyle = 'rgba(255, 255, 255, 1)';
  ctx.fillRect (0, 0, w, h);
}
function drawCircle(x, y){
  t++;
  var hue =  Math.floor(Math.random() * 360);
  var hsl  = [hue,'100%','50%'].join(',');
  ctx.fillStyle = 'hsl(' + hsl + ')';
  ctx.beginPath();
  ctx.drawImage(img2, cx-90, cy-90, 180, 180);
  //var x =  x || Math.floor(Math.random() * w);
  //var y =  y || Math.floor(Math.random() * h);
  //var r =  Math.floor(Math.random() * w/20)+w/60;
  var r = 60;
  var rSize = 120;
  x = cx + Math.sin(t)*rSize;
  y = cy + Math.cos(t)*rSize;
  //ctx.arc(x, y, r, 0, 2*Math.PI, true);
  ctx.drawImage(img, x-60, y-60, 120, 120);
  ctx.fill();
}

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

view-source:https://hi0a.com/demo/-neta/js-canvas-animation-around/