写一个微信投骰子动画的代码

以下是一个简单的微信投骰子动画的代码示例：

HTML 代码：

<canvas id="dice" width="100" height="100"></canvas>
<button onclick="rollDice()">投骰子</button>

JavaScript 代码：

var canvas = document.getElementById("dice");
var ctx = canvas.getContext("2d");

function drawDice(number) {
  ctx.clearRect(, , canvas.width, canvas.height);
  ctx.fillStyle = "#FFFFFF";
  ctx.fillRect(, , canvas.width, canvas.height);
  ctx.fillStyle = "#000000";
  ctx.beginPath();
  ctx.arc(25, 25, 5, , 2 * Math.PI);
  ctx.arc(75, 75, 5, , 2 * Math.PI);
  ctx.closePath();
  if (number == 1) {
    ctx.fill();
  } else if (number == 2) {
    ctx.fill();
    ctx.beginPath();
    ctx.arc(50, 50, 5, , 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
  } else if (number == 3) {
    ctx.fill();
    ctx.beginPath();
    ctx.arc(50, 50, 5, , 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
    ctx.beginPath();
    ctx.arc(25, 75, 5, , 2 * Math.PI);
    ctx.arc(75, 25, 5, , 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
  } else if (number == 4) {
    ctx.fill();
    ctx.beginPath();
    ctx.arc(25, 75, 5, , 2 * Math.PI);
    ctx.arc(75, 25, 5, , 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
    ctx.beginPath();
    ctx.arc(25, 25, 5, , 2 * Math.PI);
    ctx.arc(75, 75, 5, , 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
  } else if (number == 5) {
    ctx.fill();
    ctx.beginPath();
    ctx.arc(25, 75, 5, , 2 * Math.PI);
    ctx.arc(75, 25, 5, , 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
    ctx.beginPath();
    ctx.arc(25, 25, 5, , 2 * Math.PI);
    ctx.arc(75, 75, 5, , 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
    ctx.beginPath();
    ctx.arc(50, 50, 5, , 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
  } else if (number == 6) {
    ctx.fill();
    ctx.beginPath();
    ctx.arc(25, 75, 5, , 2 * Math.PI);
    ctx.arc(75, 25, 5, , 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
    ctx.beginPath();
    ctx.arc(25, 25, 5, , 2 * Math.PI);
    ctx.arc(75, 75, 5, , 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
    ctx.beginPath();
    ctx.arc(25, 50, 5, , 2 * Math.PI);
    ctx.arc(75, 50, 5, , 2 * Math.PI);
    ctx.closePath();
    ctx.fill();
  }
}

function rollDice() {
  var number = Math.floor(Math.random() * 6) + 1;
  var count = ;
  var interval = setInterval(function() {
    drawDice(Math.floor(Math.random() * 6) + 1);
    count++;
    if (count == 10) {
      clearInterval(interval);
      drawDice(number);
    }
  }, 100);
}