当 使用canvas 画一个圆带边框时 圆的视觉半径不等于 2 * (边框的宽度 + 半径)
圆的视觉半径不等于 边框的宽度 + 2* 半径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
<title>canvas 遇见 边框的圆</title>
</head>
<body>
<canvas id="c"></canvas>
<script type="text/javascript">
var canvas = document.querySelector("#c");
canvas.width = 200;
canvas.height = 200;
var ctx = canvas.getContext("2d");
if (canvas.getContext) {
ctx.beginPath();
ctx.lineWidth = 20;
ctx.fillStyle = 'blue'
ctx.strokeStyle = "rgba(45,95,100,0.8)"
ctx.arc(100, 100, 70, 0, Math.PI * 2, false);
ctx.fill();
ctx.stroke();
ctx.closePath();
}
</script>
</body>
</html>
