SOURCE

console 命令行工具 X clear

                    
>
console
function drawSwitchPortSharp(ctx, switchX, switchY, port1X, port1Y, port2X, port2Y) {
  ctx.save();
  ctx.beginPath();
  ctx.fillStyle = "rgba(0,0,0,0.2)";
  ctx.moveTo(switchX, switchY);
  ctx.bezierCurveTo(switchX, port1Y, port1X, (switchY + port1Y) / 2, port1X, port1Y);
  ctx.lineTo(port2X, port2Y);
  ctx.bezierCurveTo(port2X, (switchY + port2Y) / 2, switchX, port2Y, switchX, switchY);
  //ctx.stroke();
  //ctx.closePath();
  ctx.fill();
  ctx.restore();
}
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

drawSwitchPortSharp(ctx, 250, 20, 50, 200, 450, 200);
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;">
  您的浏览器不支持 HTML5 canvas 标签。
</canvas>