canvas arc()方法詳解

admin發表於2018-08-09
Canvas

推薦參閱canvas arc()一文替代本篇文章。

此方法可以繪製圓弧，下面詳細介紹一下它的用法。

語法結構:

[JavaScript] 純文字檢視 複製程式碼
context.arc(x,y,r,sAngle,eAngle,counterclockwise)

引數解析:

（1）.x：必需，圓心的x軸座標。

（2）.y：必需，圓心的y軸座標。

（3）.r：必須，圓的半徑尺寸。

（4）.sAngle：必需，圓弧繪製起始角度（弧度）。

（5）.eAngle：必需，圓弧繪製的終止角度（弧度）。

（6）.counterclockwise：可選，規定圓弧順時針繪製還是逆時針繪製，false順時針（預設），true逆時針。

先補充一點初中數學知識，以便於圓角繪製：

一個圓周的弧度是2π，一個圓周是360度，那麼一度角對應2π/360弧度。

於是得出，任意度數角α對應的弧度是α*π/180。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.arc(100, 100, 80, 0, 2 * Math.PI);
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

上面的程式碼繪製了一個完整的圓弧，從0弧度開始繪製，2π弧度結束。

0弧度的開始位置預設座標是（180,100）。

再來看一個程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var rad = Math.PI / 180;
  ctx.arc(100, 100, 80, 30 * rad, 120 * rad);
  ctx.stroke();
  ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

上面的程式碼繪製了從30度到120度的圓弧；大家也可以注意到canvas的圓角計算模型和數學中的有所區別，數學中的逆時針是正，但是canvas中順時針為正。再來看一度程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  var rad = Math.PI / 180;
  ctx.arc(100, 100, 80, 30 * rad, 120 * rad,true);
  ctx.stroke();
  ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

上面的程式碼我們將繪製設定為逆時針。

特別注意：雖然繪製方向變了，但是canvas的圓角計算模型沒變，依然是順時針為正。

相關文章