使用canvas绘制一个圆角矩形

以下是使用canvas绘制一个圆角矩形的示例代码：

<canvas id="myCanvas"></canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// 绘制圆角矩形
function roundRect(x, y, width, height, radius) {
  ctx.beginPath();
  ctx.moveTo(x + radius, y);
  ctx.lineTo(x + width - radius, y);
  ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
  ctx.lineTo(x + width, y + height - radius);
  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
  ctx.lineTo(x + radius, y + height);
  ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
  ctx.lineTo(x, y + radius);
  ctx.quadraticCurveTo(x, y, x + radius, y);
  ctx.closePath();
}

// 绘制圆角矩形
roundRect(50, 50, 200, 100, 20);

// 设置填充颜色和边框颜色
ctx.fillStyle = "#FFA500";
ctx.strokeStyle = "#000000";

// 填充圆角矩形
ctx.fill();

// 绘制边框圆角矩形
ctx.stroke();
</script>

在上面的示例代码中，我们首先定义了一个名为roundRect的函数，该函数接受5个参数：x、y、width、height和radius，分别表示圆角矩形的左上角坐标、宽度、高度和圆角半径。该函数使用canvas中的路径绘制方法来绘制圆角矩形。

在绘制圆角矩形后，我们设置了填充颜色和边框颜色，并使用fill方法填充圆角矩形，使用stroke方法绘制边框圆角矩形。

在实际使用中，你可以根据需要调整圆角矩形的位置、大小、圆角半径和颜色等参数，创建不同的圆角矩形效果。