啥也不说,先上示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>圆角矩形</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.bezierCurveTo(50,100,50,50,100,50);
ctx.lineTo(200,50);
ctx.bezierCurveTo(200,50,250,50,250,100);
ctx.lineTo(250,150);
ctx.bezierCurveTo(250,150,250,200,200,200);
ctx.lineTo(100,200);
ctx.bezierCurveTo(100,200,50,200,50,150);
ctx.closePath();
ctx.stroke();
</script>
</body>
</html>
运行效果: