1、圆角矩形:
<style>
canvas{
width: 500px;
height: 300px;
border: 1px solid;
}
</style>
</head>
<body>
<canvas id="can" width="500px" height="300px"></canvas>
<script>
// 圆角矩形:
var canvas = document.getElementById('can');
var ctx = canvas.getContext('2d');
ctx.moveTo(100,110);//起点:注意要多出10px的圆角长度
ctx.arcTo(100,200,200,200,10)//B点,C点:没有实际的线段,只是方向,10:圆角有多长
ctx.arcTo(200,200,200,100,10);
ctx.arcTo(200,100,100,100,10);
ctx.arcTo(100,100,100,200,10);
ctx.stroke();
</script>
</body>