绘制一个具有动画效果的图表，要求如下： （1）绘制一条正弦曲线 （2）绘制一个红色圆点，该圆点最初位于正弦曲线的左端 （3）制作一个圆点曲线运动的动画，并时刻显示圆点位置。

你可以使用 JavaScript 和 Canvas 来实现这个动画效果。下面是实现步骤：

1. 在 HTML 中创建一个 Canvas：

<canvas id="myCanvas" width="500" height="300"></canvas>

2. 在 JavaScript 中获取 Canvas 和 2D上下文对象：

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

3. 绘制一条正弦曲线：

ctx.beginPath();
for (var x = 0; x <= canvas.width; x++) {
  var y = 100 + 50 * Math.sin(x * Math.PI / 180);
  ctx.lineTo(x, y);
}
ctx.strokeStyle = "#000";
ctx.stroke();

4. 绘制一个红色圆点，该圆点最初位于正弦曲线的左端：

var x = 0;
var y = 100 + 50 * Math.sin(x * Math.PI / 180);
ctx.beginPath();
ctx.arc(x, y, 5, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill();

5. 制作一个圆点曲线运动的动画，并时刻显示圆点位置：

var x = 0;
setInterval(function() {
  // 清空 Canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // 绘制正弦曲线
  ctx.beginPath();
  for (var i = 0; i <= canvas.width; i++) {
    var y = 100 + 50 * Math.sin(i * Math.PI / 180);
    ctx.lineTo(i, y);
  }
  ctx.strokeStyle = "#000";
  ctx.stroke();
  // 绘制圆点
  ctx.beginPath();
  x += 5;
  y = 100 + 50 * Math.sin(x * Math.PI / 180);
  ctx.arc(x, y, 5, 0, 2 * Math.PI);
  ctx.fillStyle = "red";
  ctx.fill();
}, 50);

这样就可以制作一个圆点在正弦曲线上运动的动画啦！