首先介紹下這個函數
context.arcTo(x1, y1, x2, y2, r);
其中x1爲弧的起點x座標；
其中y1爲弧的起點y座標；
其中x2爲弧的終點x座標；
其中y2爲弧的終點y座標；
其中r爲弧的半徑。
程序運行截圖如下：
源碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
當前瀏覽器不支持canvas
</canvas>
<script>
window.onload = function(){
let canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
let context = canvas.getContext("2d");
context.beginPath();
context.moveTo(150, 150);
context.arcTo(650, 150, 650, 650, 300);
context.lineWidth = 6;
context.strokeStyle = "red";
context.stroke();
//baseline
context.beginPath();
context.moveTo(150, 150);
context.lineTo(650, 150);
context.lineTo(650, 650);
context.lineWidth = 2;
context.strokeStyle = "gray";
context.stroke();
}
</script>
</body>
</html>
下面是繪製給彎月
程序運行截圖如下：
源碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">
當前瀏覽器不支持canvas
</canvas>
<script>
window.onload = function(){
let canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 800;
let context = canvas.getContext("2d");
context.arc(400, 400, 300, 0.5 * Math.PI, 1.5 * Math.PI, true);
context.moveTo(400, 100);
context.arcTo(1200, 400, 400, 700, (400 - 100) * dis(400, 100, 1200, 400) / (1200 - 400));
context.stroke();
}
function dis(x1, y1, x2, y2){
return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
}
</script>
</body>
</html>
</body>
</html>
這裏月亮最左邊的那條邊是圓弧，正園，不是橢圓，所以一開始使用arc去畫給半圓，然後再使用arcTo去畫弧。
這裏來說下arcTo中半徑是怎麼算的
也就是(400 - 100) * dis(400, 100, 1200, 400) / (1200 - 400)
這裏aco的tan爲AH/HC也爲R/AC
也就是R = (AH * AC) / HC
這個AH爲400 - 100
AC爲AH平方+HC的平方 開根號，也就是dis中的計算
HC爲1200 - 400