Canvas 绘制圆角矩形并实现均匀描边 - 代码示例

下面是一个使用 canvas 绘制圆角矩形并描边均匀的示例代码：\n\njavascript\nvar canvas = document.getElementById('myCanvas');\nvar ctx = canvas.getContext('2d');\n\nvar x = 50; // 矩形的左上角x坐标\nvar y = 50; // 矩形的左上角y坐标\nvar width = 200; // 矩形的宽度\nvar height = 100; // 矩形的高度\nvar radius = 20; // 圆角的半径\n\nctx.lineWidth = 5; // 描边的宽度\nctx.strokeStyle = 'blue'; // 描边的颜色\nctx.lineJoin = 'round'; // 描边的连接方式，使得圆角更加平滑\n\nctx.beginPath();\nctx.moveTo(x + radius, y);\nctx.lineTo(x + width - radius, y);\nctx.quadraticCurveTo(x + width, y, x + width, y + radius);\nctx.lineTo(x + width, y + height - radius);\nctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);\nctx.lineTo(x + radius, y + height);\nctx.quadraticCurveTo(x, y + height, x, y + height - radius);\nctx.lineTo(x, y + radius);\nctx.quadraticCurveTo(x, y, x + radius, y);\nctx.closePath();\n\nctx.stroke();\n\n\n在上面的示例代码中，我们使用了lineWidth属性来设置描边的宽度，strokeStyle属性来设置描边的颜色，lineJoin属性来设置描边的连接方式。然后使用beginPath()方法开始绘制路径，使用moveTo()方法将绘制的起始点移动到矩形的左上角的圆角处，然后使用lineTo()和quadraticCurveTo()方法来绘制圆角矩形的边界，最后使用closePath()方法关闭路径并使用stroke()方法进行描边操作。