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