canvas 作星星打分三维图

<div style="position:relative">
   <canvas id="star5" width = '400' height = '500'></canvas>
   <canvas id="star51" width = '400' height = '500' style="position:absolute;top:0;left:0"></canvas>
</div>

<script>
   var myCanvasbg = document.getElementById("star5");
   var context = myCanvasbg.getContext("2d");
   context.fillStyle ='rgba(255,0,0,.3)';//填充颜色：红色，半透明
   context.strokeStyle ='hsl(120,50%,50%)';//线条颜色：绿色
   context.lineWidth = 13;//设置线宽
   context.beginPath();
   context.moveTo(200,50);
   context.lineTo(100,223);
   context.lineTo(300,223);
   context.closePath();//可以把这句注释掉再运行比较下不同
   // context.stroke();//画线框
   context.fill();//填充颜色
  </script>
  <script>
  var a = 2; //输入值
  var b = 3; 
  var c = 4;

  var yuandiana = 200,
      yuandianb = 165.5;
  var firsta = 200,
      firstb = 50;
  var seconda = 100,
      secondb = 223;
  var thirda = 300,
      thirdb = 223;
  var totallong = 115.5;
  var secondc = yuandiana-(b/5)*100,
      secondd = yuandianb+(b/5)*57.75,
      thirdc = yuandiana+(c/5)*100,
      thirdd = yuandianb+(c/5)*57.75,
      firstc = yuandiana,
      firstd = yuandianb-(a/5)*115.5;
   var myCanvasstar = document.getElementById("star51");
   var context = myCanvasstar.getContext("2d");
   context.fillStyle ='rgba(255,225,0,.3)';//填充颜色：红色，半透明
   context.strokeStyle ='hsl(120,50%,50%)';//线条颜色：绿色
   context.lineWidth = 5;//设置线宽
   context.beginPath();
   context.moveTo(firstc,firstd);
   context.lineTo(secondc,secondd);
   context.lineTo(thirdc,thirdd);
   context.closePath();//可以把这句注释掉再运行比较下不同
   context.stroke();//画线框
   // context.fill();//填充颜色
  </script>