<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>