context使用图像变换实现展开卡片的动画效果

展开卡片的动画效果可以使用context的图像变换（transform）实现。具体步骤如下：

1. 在canvas中绘制要展开的卡片，可以使用drawImage()方法或者其他绘制方法。

2. 设置卡片的初始位置，可以使用translate()方法将canvas的原点移动到卡片的左上角。

context.translate(x, y);

其中，x和y分别表示卡片的左上角在canvas中的横坐标和纵坐标。

3. 使用scale()方法将卡片缩小为0。

context.scale(0, 0);

4. 在一定时间内，使用requestAnimationFrame()方法不断改变缩放比例，从而实现动画效果。

var scale = 0;
var startTime = null;

function animate() {
  if (!startTime) startTime = Date.now();
  var timeElapsed = Date.now() - startTime;
  scale = Math.min(timeElapsed / 1000, 1); // 缩放比例不超过1
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.save();
  context.translate(x, y);
  context.scale(scale, scale);
  // 绘制卡片
  context.restore();
  if (scale < 1) {
    requestAnimationFrame(animate);
  }
}

requestAnimationFrame(animate);

其中，scale表示当前缩放比例，startTime表示动画开始的时间，timeElapsed表示动画已经经过的时间。在animate()函数中，首先计算当前缩放比例，然后清除canvas上的绘制内容，保存当前绘制环境，进行translate()和scale()变换，绘制卡片，最后恢复绘制环境。如果缩放比例不到1，就使用requestAnimationFrame()方法继续执行animate()函数，直到缩放比例达到1为止。

通过改变缩放比例实现动画效果，可以使卡片逐渐展开，同时保持卡片的位置不变。