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

可以使用JavaScript和HTML5 Canvas来实现这个需求。我们首先需要绘制正弦曲线和初始位置的圆点：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = 0;
var y = Math.sin(x) * 100 + 150; // 正弦曲线公式
ctx.beginPath();
ctx.moveTo(x, y);
for(var i = 1; i <= 40; i++) {
  x = i * 10;
  y = Math.sin(x * Math.PI/180) * 100 + 150; // 将角度转换为弧度
  ctx.lineTo(x, y);
}
ctx.strokeStyle = "#000";
ctx.stroke();
ctx.fillStyle = "#f00";
ctx.beginPath();
ctx.arc(0, y, 5, 0, 2*Math.PI);
ctx.fill();

接下来我们可以使用setInterval函数来循环更新圆点位置，从而制作动画效果：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = 0;
var y = Math.sin(x) * 100 + 150;
ctx.beginPath();
ctx.moveTo(x, y);
for(var i = 1; i <= 40; i++) {
  x = i * 10;
  y = Math.sin(x * Math.PI/180) * 100 + 150;
  ctx.lineTo(x, y);
}
ctx.strokeStyle = "#000";
ctx.stroke();

function drawCircle() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  var y = Math.sin(x * Math.PI/180) * 100 + 150;
  ctx.beginPath();
  ctx.moveTo(x, y);
  for(var i = x/10 + 1; i <= 40; i++) {
    x = i * 10;
    y = Math.sin(x * Math.PI/180) * 100 + 150;
    ctx.lineTo(x, y);
  }
  ctx.strokeStyle = "#000";
  ctx.stroke();
  ctx.fillStyle = "#f00";
  ctx.beginPath();
  ctx.arc(x, y, 5, 0, 2*Math.PI);
  ctx.fill();
  x += 5; // 每次位移5像素
}

setInterval(drawCircle, 50);

在上述代码中，我们定义了一个函数`drawCircle`来更新圆点的位置，并且使用`setInterval`函数每50毫秒执行一次`drawCircle`函数，从而制作圆点曲线运动的动画效果。