canvas arc()

admin發表於2018-11-29
Canvas

arc翻譯成漢語具有"圓弧"的意思。

恰如其名，arc方法可以用來繪製圓弧，最大的圓弧就是一個整圓。

語法結構：

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

引數解析:

（1）.x：必需，規定圓弧所在圓的圓心x軸座標。

（2）.y：必需，規定圓弧所在圓的圓心y軸座標。

（3）.r：必需，規定圓弧所在圓的半徑座標。

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

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

（6）.counterclockwise：可選，布林值，規定圓弧繪製的方向，true表示逆時針，false順時針，預設值。

瀏覽器相容：

（1）.IE9+瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（3）.谷歌瀏覽器支援此方法。。

（4）.火狐瀏覽器支援此方法。

（5）.Opera瀏覽器支援此方法。

（6）.Safari瀏覽器支援此方法。

程式碼例項：

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

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/29/163200u4vu4fa4naaaa66k.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

arc方法用於繪製圓弧，圓是最大的圓弧，程式碼分析如下：

（1）.圓心座標是（100, 100）。

（2）.規定圓的半徑為50畫素。

（3）.規定繪製的起始弧度為0，結束弧度為2π，於是完成一個整圓的繪製。

arc方法的理解是非常簡單的，唯一有難度的地方在於第四和第五個引數。

特別說明：繪製圓弧起始和終止角度用的是弧度。

下面補充一下初中關於圓的數學知識：

（1）.一個圓周的弧度是2π，值等同於程式碼中的2 * Math.PI。

（2）.一個圓周的角度是360。

那麼可以推匯出如下結論：

（1）.一度角對應(2 * Math.PI)/360弧度。

（2）.那麼任意角度α對應的弧度是α*((2 * Math.PI)/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(){
  let cs = document.getElementById("cs");
  let ctx = cs.getContext("2d");
  let rad = Math.PI / 180;
  ctx.strokeStyle="rgba(255,0,0,0.3)";
  ctx.arc(100, 100, 50, 0 * rad, 360 * rad);
  ctx.stroke();
  ctx.beginPath();
  ctx.strokeStyle="rgba(125,125,125,1.0)";
  ctx.arc(100, 100, 50, 0 * rad, 50 * rad);
  ctx.stroke();
}
</script>
</head>
<body>
<canvas id="cs" width="400" height="200"></canvas>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/29/163239psfktkkjkuqzktjf.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.繪製了一個紅色的整圓，此圓恰好與灰色圓弧所在的圓重合，為了便於觀察效果。

（2）.圓弧預設是按照順時針方向繪製的，也就是最後一個引數為false（預設）。

同時，可以得出，canvas中，角度以順時針為正，普通數學中，以逆時針為正，再來看一段程式碼：

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

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/29/163310eyuqoqkovyk7qycc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

弧度值不但可以正數，也可以是負數，和數學中原理大致相同，程式碼分析如下：

（1）.canvas中角度以順時針為，那麼很自然逆時針為負，與常規數學模型相反。

（2）.那麼繪製-50度角對應的圓弧，也就是從A點到B點這段圓弧角度。

（3）.但是又由於是按照逆時針方向繪製，所以就繪製出一大段灰色圓弧。

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

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/29/163340d9l98vzhzmz9ml8d.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

將方法的最後一個引數設定為true，也就是逆時針繪製。

相關文章