用canvas 绘制一个顶牌

绘制一个顶牌需要使用Canvas的API来实现。下面提供一份简单的代码供参考：

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

// 设置顶牌的宽和高
canvas.width = 200;
canvas.height = 300;

// 绘制顶牌的外边框
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(180, 20);
ctx.quadraticCurveTo(200, 20, 200, 40);
ctx.lineTo(200, 260);
ctx.quadraticCurveTo(200, 280, 180, 280);
ctx.lineTo(20, 280);
ctx.quadraticCurveTo(0, 280, 0, 260);
ctx.lineTo(0, 40);
ctx.quadraticCurveTo(0, 20, 20, 20);
ctx.strokeStyle = 'black';
ctx.stroke();

// 绘制顶牌的内部内容
ctx.fillStyle = 'red';
ctx.fillRect(25, 25, 150, 250);

// 绘制顶牌的文字
ctx.fillStyle = 'white';
ctx.font = 'bold 30px Arial';
ctx.textAlign = 'center';
ctx.fillText('A', 100, 160);

这段代码实现了一个简单的顶牌，其中包括了边框、内部内容和文字。你可以根据自己的需求来修改代码，实现更加复杂的顶牌效果。