canvas arcTo()

admin發表於2018-08-09
Canvas

此方法外觀與arc方法外觀相似，有理由相信在功能上也有類似之處。

arc方法規規矩矩繪製一個圓弧，具體參閱canvas arc()一章節。

而arcTo方法比arc方法多了"一點"，那麼肯定就不太規矩。

它繪製的圖案中包含圓弧，但是多出了一條直線“尾巴”。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
ctx.arcTo(x1, y1, x2, y2, radius);

引數解析：

（1）.（x1,y1）：必需，規定第一個控制點的座標。

（2）.（x2,y2）：必需，規定第二個控制點的座標。

（3）.radius：必需，規定圓弧所在圓的半徑尺寸。

繪製示意圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/30/010440taia0a8bf7v78i8j.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

詳細分析如下：

（1）.起點與第一個控制點連線成一條直線。

（2）.第一個控制點與第二個控制點連線成一條直線。

（3）.那麼通過這兩條直線與圓的半徑可以繪製一個與直線相切的圓弧。

（4）.起點與圓弧連線起來，就是最終繪製的圖案。

瀏覽器相容：

（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.beginPath();
  ctx.moveTo(10, 50);
  ctx.lineWidth=4;
  ctx.arcTo(150, 50, 150, 150, 50);
  ctx.stroke();
  ctx.closePath();
}
</script>
</head>
<body>
<canvas id="cs" width="400" height="300"></canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/30/010518xhn3n3ml8mchhue8.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.起點座標由moveTo方法規定。

（2）.第一個控制點座標是（150, 50）,第二個控制點座標是（150, 150）。

（3）.然後根據半徑繪製一個與兩條直線相切的圓弧。

（4）.最後從起點繪製一條直線與圓弧連線起來（連線點是切點），形成最終圖案。

[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.beginPath();
  ctx.moveTo(100, 50);
  ctx.lineWidth=4;
  ctx.arcTo(150, 50, 150, 150, 50);
  ctx.stroke();
  ctx.closePath();
}
</script>
</head>
<body>
<canvas id="cs" width="400" height="300"></canvas>
</body>
</html>

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

a:3:{s:3:\"pic\";s:43:\"portal/201811/30/010543nb7z0p0qdd0wgbll.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

如果起點座標恰好位於切點之上，那麼可以繪製一個規範的圓弧。

相關閱讀：

（1）.beginPath方法參閱canvas beginPath()一章節。

（2）.moveTo方法參閱canvas moveTo()一章節。

（3）.lineWidth參閱canvas lineWidth一章節。

（4）.stroke方法參閱canvas stroke()一章節。

相關文章