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>