帮我用canvas绘制一个顶牌

以下是使用Canvas绘制一个顶牌的示例代码：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 顶点坐标
var vertices = [
    { x: 50, y: 50 },
    { x: 50, y: 150 },
    { x: 150, y: 150 },
    { x: 150, y: 50 },
    { x: 100, y: 100 }
];

// 边界坐标
var bounds = {
    left: vertices[0].x,
    top: vertices[0].y,
    right: vertices[0].x,
    bottom: vertices[0].y
};

// 计算边界坐标
for (var i = 1; i < vertices.length; i++) {
    var vertex = vertices[i];
    if (vertex.x < bounds.left) bounds.left = vertex.x;
    if (vertex.y < bounds.top) bounds.top = vertex.y;
    if (vertex.x > bounds.right) bounds.right = vertex.x;
    if (vertex.y > bounds.bottom) bounds.bottom = vertex.y;
}

// 绘制多边形
ctx.beginPath();
ctx.moveTo(vertices[0].x, vertices[0].y);
for (var i = 1; i < vertices.length; i++) {
    ctx.lineTo(vertices[i].x, vertices[i].y);
}
ctx.closePath();
ctx.fillStyle = '#ff0000';
ctx.fill();

// 绘制边界矩形
ctx.beginPath();
ctx.rect(bounds.left, bounds.top, bounds.right - bounds.left, bounds.bottom - bounds.top);
ctx.strokeStyle = '#0000ff';
ctx.lineWidth = 2;
ctx.stroke();

这个代码使用了Canvas的绘图API，首先定义了一个包含顶点坐标的数组，然后计算出顶点形成的多边形的边界坐标，最后使用绘图API绘制多边形和边界矩形。你可以将这段代码复制到一个HTML文件中，并在浏览器中打开该文件，就可以看到绘制出来的顶牌了。