用canvas 画一个坤坤投篮动作的动画效果

好的，以下是用canvas画一个坤坤投篮动作的动画效果的代码：

HTML：

<canvas id="canvas"></canvas>

CSS：

#canvas {
  width: 500px;
  height: 500px;
}

JavaScript：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 绘制坤坤
const kunImg = new Image();
kunImg.src = 'https://i.imgur.com/3dZpLbZ.png';
const kunWidth = 150;
const kunHeight = 150;
let kunX = canvas.width / 2 - kunWidth / 2;
let kunY = canvas.height / 2 - kunHeight / 2;

// 绘制篮球
const ballImg = new Image();
ballImg.src = 'https://i.imgur.com/3jKxH91.png';
const ballWidth = 50;
const ballHeight = 50;
let ballX = kunX + 60;
let ballY = kunY - 20;

let frame = 0;
let isShooting = false;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制坤坤
  ctx.drawImage(kunImg, kunX, kunY, kunWidth, kunHeight);

  // 绘制篮球
  ctx.drawImage(ballImg, ballX, ballY, ballWidth, ballHeight);

  if (isShooting) {
    // 投篮动作
    if (frame < 20) {
      kunX += 2;
      kunY -= 2;
      ballX += 2;
      ballY -= 2;
    } else if (frame < 30) {
      kunX += 3;
      kunY += 3;
      ballX += 3;
      ballY += 3;
    } else if (frame < 40) {
      kunX += 2;
      kunY += 2;
      ballX += 2;
      ballY += 2;
    } else if (frame < 50) {
      kunX += 1;
      kunY += 1;
      ballX += 1;
      ballY += 1;
    } else {
      isShooting = false;
    }

    frame++;
  }

  requestAnimationFrame(draw);
}

canvas.addEventListener('click', () => {
  if (!isShooting) {
    frame = 0;
    isShooting = true;
  }
});

draw();

在这个示例中，我们首先在HTML中添加一个canvas元素，并在CSS中设置宽度和高度。然后，在JavaScript中，我们获取canvas元素和2D上下文，然后绘制坤坤和篮球的图像。我们还定义了一些变量，例如坤坤和篮球的位置，以及帧计数器和投篮标志。

在draw()函数中，我们首先清除画布，然后绘制坤坤和篮球的图像。如果投篮标志为true，则进行投篮动作。我们使用帧计数器来控制投篮动作的每个阶段。最后，我们使用requestAnimationFrame()函数来调用draw()函数，以便在浏览器下一帧绘制画面。

最后，我们在canvas元素上添加一个click事件监听器。如果投篮标志为false，则将帧计数器重置为0并将投篮标志设置为true，以触发投篮动作。