包含"摇动"效果的HTMLCanvas动画

我有一个使用canvas创建的动画.动画几乎完成,它显示爆炸.我想知道是否有办法创造一种震动效果,好像画布的内容在发生爆炸时会震动几秒钟.

任何帮助赞赏.

摇动屏幕的一种简单方法是在每次抽奖之前以随机方向翻译整个上下文.
您必须保存/恢复上下文以使其保持"干净"状态.

var ctx=cv.getContext('2d');

function preShake() {
  ctx.save();
  var dx = Math.random()*10;
  var dy = Math.random()*10;
  ctx.translate(dx, dy);  
}

function postShake() {
  ctx.restore();
}

function drawThings() {  
  ctx.fillStyle = '#F00';
  ctx.fillRect(10, 10, 50, 30);
  ctx.fillStyle = '#0F0';
  ctx.fillRect(140, 30, 90, 110);
  ctx.fillStyle = '#00F';
  ctx.fillRect(80, 70, 60, 40);
}

drawThings();

function animate() {
  // keep animation alive
  requestAnimationFrame(animate);
  // erase
  ctx.clearRect(0,0,cv.width, cv.height);
  //
  preShake();
  //
  drawThings();
  //
  postShake();
}

animate();