如何在 HTML5 中使用 arc() 绘制圆?
html5web developmentfront end technology更新于 2024/5/23 2:20:17
arc() 是 Canvas 2D API 中的一个方法。arc() 方法允许您绘制圆弧。
语法
以下是在 HTML5 中使用 arc() 绘制圆的语法
arc(x, y, radius, startAngle, endAngle) arc(x, y, radius, startAngle, endAngle, counterclock)
arc() 方法生成一个以 (x, y) 为圆心，半径为 radius 的圆弧。路径以逆时针方向移动，始于 startAngle 并结束于 endAngle(默认为顺时针)。
参数
以下是此方法的参数 -
X - 圆弧中心的水平坐标。
Y - 圆弧中心的垂直坐标。
半径 - 圆弧的直径。这一定令人振奋。
StartAngle − 圆弧起始的 x 轴正方向角度(以弧度为单位)。
EndAngle − 圆弧的终止角度，以弧度表示，相对于 x 轴正方向测量。
Counterclock − 一个布尔值指示符。如果条件为真，则在起始角和终止角之间逆时针绘制圆弧;默认值为假(顺时针)。
为了更好地理解如何在 HTML5 中使用圆弧绘制圆，让我们看以下示例。
示例 1
在下面的示例中，我们使用 arc() 在画布上绘制一个圆。为了获得完整的圆，我们必须将起始角设为 0，终止角设为 360。
<!DOCTYPE html> <html> <body> <canvas id="Varma" width="300" height="150"></canvas> <script> var c = document.getElementById("Varma"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.arc(100, 75, 50, 0, 360); ctx.stroke(); </script> </body> </html>
执行上述脚本后，将在网页上显示使用 ctx.arc 绘制的圆。
示例 2
以下是另一个示例 −
<!DOCTYPE html> <html> <head> <title>HTML Canvas</title> <head> <body> <canvas id="newCanvas" width="300" height="150" style="border:1px solid #000000;"></canvas> <script> var c = document.getElementById("newCanvas"); var ctxt = c.getContext("2d"); ctxt.beginPath(); ctxt.arc(100,75,50,0,2*Math.PI); ctxt.stroke(); </script> </body> </html>
