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

var imgFace = new Image();
imgFace.src = 'nayumo.png';
imgFace.src = 'bsky-boss.png';
imgFace.src = 'nayumo.png';
var imgMouse = new Image();
imgMouse.src = 'takao-mouse.png';

var img2 = new Image();
img2.src = 'microwave.png';



$(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();
  });
*/

  setInterval(function(){
    drawCircle();
  }, 40);

  $('#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++;
  ctx.clearRect(0, 0, ctx.canvas.clientWidth, ctx.canvas.clientHeight);
  var hue =  Math.floor(Math.random() * 360);
  var hsl  = [hue,'100%','50%'].join(',');
  ctx.fillStyle = 'hsl(' + hsl + ')';
  ctx.beginPath();
  //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 = 180;
  //x = cx + Math.sin(t)*rSize;
  //y = cy + Math.cos(t)*rSize;
  //ctx.arc(x, y, r, 0, 2*Math.PI, true);
  x0 = cx +Math.random()*4
  y0 = cy +Math.random()*4
  x = cx +Math.random()*4
  y = cy +Math.random()*4
  x2 = cx +Math.random()*4
  y2 = cy +Math.random()*4
  x3 = cx +Math.random()*4-26
  y3 = cy +Math.random()*4-10
  x4 = cx +Math.random()*4+20
  y4 = cy +Math.random()*4-10
  ctx.drawImage(imgFace, x-60, y-60, 120, 120);
  //ctx.drawImage(imgMouse, x2-20, y2+20, 40, 30);
/*
  ctx.beginPath();
  ctx.fillStyle="rgb(244,177,26)";
  ctx.arc(x3, y3, 14, 0, Math.PI*2, false);
  ctx.fill();

  ctx.beginPath();
  ctx.fillStyle="rgb(78,33,30)";
  ctx.arc(x3+4, y3-4, 8, 0, Math.PI*2, false);
  ctx.fill();


  ctx.beginPath();
  ctx.fillStyle="rgb(244,177,26)";
  ctx.arc(x4, y4, 14, 0, Math.PI*2, false);
  ctx.fill();

  ctx.beginPath();
  ctx.fillStyle="rgb(78,33,30)";
  ctx.arc(x4+4, y4-4, 8, 0, Math.PI*2, false);
  ctx.fill();
*/

  var alpha = 0.2+Math.random()*2/10;
  ctx.beginPath();
  ctx.fillStyle="rgba(255,0,0," + alpha +")";
  ctx.fillRect(x0-60,y0-60, 120, 120);
  ctx.fill();

  ctx.drawImage(img2, x0-80, y0-100, 200, 200);
}

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

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