用animation绘制一个具有动画效果的图表，要求如下：绘制一个正弦曲线，绘制一个红色圆点，该圆点最初位于正弦曲线的左端，制作一个圆点沿曲线运动的动画，并时刻显示圆点的坐标

好的，根据您的要求，可以使用HTML5中的<canvas>元素和JavaScript来制作这个动画。

首先，在HTML文档中创建一个画布元素，并在JavaScript中获取该元素的上下文对象：

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

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
</script>

接下来，绘制正弦曲线和圆点。可以使用数学函数来计算正弦曲线上每个点的坐标，然后使用context.arc()方法绘制圆点：

//绘制正弦曲线
ctx.beginPath();
for (var x = 0; x < canvas.width; x += 10) {
  var y = Math.sin(x * Math.PI / 180) * 50 + canvas.height / 2;
  ctx.lineTo(x, y);
}
ctx.strokeStyle = "#000";
ctx.stroke();

//绘制圆点
var ball = {
  x: 0,  //圆点的初始横坐标
  y: Math.sin(0) * 50 + canvas.height / 2,  //计算圆点的纵坐标
  radius: 10,  //圆点的半径
  speed: 1,  //圆点的移动速度
  draw: function () {  //绘制圆点的方法
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = "red";
    ctx.fill();
    ctx.closePath();
  }
};
ball.draw();  //绘制初始位置的圆点

现在，我们需要通过动画来让圆点沿着正弦曲线移动。可以使用requestAnimationFrame()方法来实现动画。每一次动画帧中，移动圆点的横坐标，并重新绘制圆点：

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);  //清除画布
  ctx.beginPath();
  for (var x = 0; x < canvas.width; x += 10) {
    var y = Math.sin(x * Math.PI / 180) * 50 + canvas.height / 2;
    ctx.lineTo(x, y);
  }
  ctx.strokeStyle = "#000";
  ctx.stroke();
  
  ball.x += ball.speed;  //移动圆点的横坐标
  ball.y = Math.sin(ball.x * Math.PI / 180) * 50 + canvas.height / 2;  //计算圆点的纵坐标
  
  ball.draw();  //重新绘制圆点

  //显示圆点的坐标
  var coordinate = "x: " + ball.x + " , y: " + ball.y;
  ctx.font = "20px Arial";
  ctx.fillStyle = "black";
  ctx.fillText(coordinate, 10, 50);

  requestAnimationFrame(animate);  //递归调用animate()方法，形成动画帧
}
animate();  //启动动画

以上代码可以在浏览器中运行，绘制出一个具有动画效果的正弦曲线和圆点，并时刻显示圆点的坐标。