使用Javascript画布环绕提示

我试着用帆布把这个形状的顶端弄圆，我试过用“arcTo”，但我搞砸了。多谢各位

var my_canvas=document.getElementById（'canvas'）；
var context=my_canvas.getContext（“2d”）；
var放大镜=4
my_canvas.width=27*放大镜；
my_canvas.height=45*放大镜；
var x=我的画布宽度/2；
变量y=我的画布高度/4；
var triangleWidth=13*放大镜；
var三角光=25*放大镜；
context.beginPath（）；
上下文。移动到（x，y）；
context.lineTo（x+triangleWidth/2，y+trianglewight/2-1）；//中右翼
context.lineTo（x+triangleWidth/2，y+trianglewight）；//右下角
context.lineTo（x-triangleWidth/2，y+trianglewight）；//左下角
context.lineTo（x-triangleWidth/2，y+trianglewight/2-1）；//中间偏左
context.lineTo（x，y）；//顶部
context.fillStyle=“橙色”；
stroke（）；
closePath（）
画布{
边框：1px点黑色；
}

如果您的浏览器不支持HTML5画布，则会显示此文本。
一辆汽车怎么样


var my_canvas=document.getElementById（'canvas'）；
var context=my_canvas.getContext（“2d”）；
var放大镜=4
my_canvas.width=27*放大镜；
my_canvas.height=45*放大镜；
var x=我的画布宽度/2；
变量y=我的画布高度/4；
var triangleWidth=13*放大镜；
var三角光=25*放大镜；
context.beginPath（）；
上下文。移动到（x，y）；
context.moveTo（x+triangleWidth/2，y+trianglewight/2-1）；//中右翼
context.lineTo（x+triangleWidth/2，y+trianglewight）；//右下角
context.lineTo（x-triangleWidth/2，y+trianglewight）；//左下角
context.lineTo（x-triangleWidth/2，y+trianglewight/2-1）；//中间偏左
context.quadraticCurveTo（x，y，x+三角形宽度/2，y+三角形宽度/2-1）//二次曲线
context.fillStyle=“橙色”；
stroke（）；
closePath（）
画布{
边框：1px点黑色；
}

如果您的浏览器不支持HTML5画布，则会显示此文本。
一辆汽车怎么样


var my_canvas=document.getElementById（'canvas'）；
var context=my_canvas.getContext（“2d”）；
var放大镜=4
my_canvas.width=27*放大镜；
my_canvas.height=45*放大镜；
var x=我的画布宽度/2；
变量y=我的画布高度/4；
var triangleWidth=13*放大镜；
var三角光=25*放大镜；
context.beginPath（）；
上下文。移动到（x，y）；
context.moveTo（x+triangleWidth/2，y+trianglewight/2-1）；//中右翼
context.lineTo（x+triangleWidth/2，y+trianglewight）；//右下角
context.lineTo（x-triangleWidth/2，y+trianglewight）；//左下角
context.lineTo（x-triangleWidth/2，y+trianglewight/2-1）；//中间偏左
context.quadraticCurveTo（x，y，x+三角形宽度/2，y+三角形宽度/2-1）//二次曲线
context.fillStyle=“橙色”；
stroke（）；
closePath（）
画布{
边框：1px点黑色；
}

如果您的浏览器不支持HTML5画布，则会显示此文本。
不清楚要在哪里取整

该示例绘制原始形状。然后整个顶部再次变钝。最后一次，只是尖端被磨圆了


{
var ctx=canvas.getContext（“2d”）；
风险等级=4
画布宽度=27*比例；
canvas.height=45*比例；
常数x=画布宽度/2；
常数y=画布高度/4；
常数三角形宽度=13*比例；
常数三角光=25*比例；
常数左=x-三角形宽度/2；
常数右=x+三角形宽度/2；
常数mid=y+三角光/2；
const bot=y+三角光；
ctx.lineWidth=3；
ctx.strokeStyle=“红色”；
ctx.beginPath（）；
ctx.lineTo（左，bot）；
ctx.lineTo（左、中）；
ctx.lineTo（x，0）；
ctx.lineTo（右，中）；
ctx.lineTo（右，bot）；
ctx.closePath（）；
ctx.stroke（）；
ctx.beginPath（）；
ctx.lineWidth=2；
ctx.strokeStyle=“蓝色”；
ctx.beginPath（）；
ctx.lineTo（左，bot）；
ctx.lineTo（左、中）；
ctx.arcTo（左，0，x，0，三角形宽度/2）；
ctx.arcTo（右、0、右、中、三角形宽度/2）；
ctx.lineTo（右，bot）；//左中
ctx.closePath（）；
ctx.stroke（）；
ctx.beginPath（）；
ctx.lineWidth=1；
ctx.strokeStyle=“黑色”；
ctx.beginPath（）；
ctx.lineTo（左，bot）；
ctx.lineTo（左、中）；
ctx.arcTo（x，0，右，中，三角形宽度/4）；
ctx.lineTo（右，中）；
ctx.lineTo（右，bot）；
ctx.closePath（）；
ctx.stroke（）；
}
画布{
边框：1px点黑色；
}
不清楚要在哪里取整

该示例绘制原始形状。然后整个顶部再次变钝。最后一次，只是尖端被磨圆了


{
var ctx=canvas.getContext（“2d”）；
风险等级=4
画布宽度=27*比例；
canvas.height=45*比例；
常数x=画布宽度/2；
常数y=画布高度/4；
常数三角形宽度=13*比例；
常数三角光=25*比例；
常数左=x-三角形宽度/2；
常数右=x+三角形宽度/2；
常数mid=y+三角光/2；
const bot=y+三角光；
ctx.lineWidth=3；
ctx.strokeStyle=“红色”；
ctx.beginPath（）；
ctx.lineTo（左，bot）；
ctx.lineTo（左、中）；
ctx.lineTo（x，0）；
ctx.lineTo（右，中）；
ctx.lineTo（右，bot）；
ctx.closePath（）；
ctx.stroke（）；
ctx.beginPath（）；
ctx.lineWidth=2；
ctx.strokeStyle=“蓝色”；
ctx.beginPath（）；
ctx.lineTo（左，bot）；
ctx.lineTo（左、中）；
ctx.arcTo（左，0，x，0，三角形宽度/2）；
ctx.arcTo（右、0、右、中、三角形宽度/2）；
ctx.lineTo（右，bot）；//左中
ctx.closePath（）；
ctx.stroke（）；
ctx.beginPath（）；
ctx.lineWidth=1；
ctx.strokeStyle=“黑色”；
ctx.beginPath（）；
ctx.lineTo（左，bot）；
ctx.lineTo（左、中）；
ctx.arcTo（x，0，右，中，三角形宽度/4）；
ctx.lineTo（右，中）；
ctx.lineTo（右，bot）；
ctx.closePath（）；
ctx.stroke（）；
}
画布{
边框：1px点黑色；
}
谢谢你的回答，有趣的解决方案！然而，另一个答案解决了我的问题谢谢你的回答，有趣的解决方案