canvas arc()方法詳解

2018-8-9 08:55| 作者: admin| 查看: 2216| 評論: 0|來自: 螞蟻部落

推薦參閱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.arpjr.tw/" />
<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.arpjr.tw/" />
<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.arpjr.tw/" />
<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的圓角計算模型沒變,依然是順時針為正。


鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部
大圣捕鱼2 吉林福彩3d今天开奖结果 一分快三彩票软件 内蒙快三今日必出号预测 天天足球游戏 黑龙江时时图表10 天福腾讯分分彩全天计划 广西快乐十分有技巧吗 推荐公式规律大小 吉林时时规则 吉林时时纪录 开奖特马 香港管家婆料大全2019 打羽毛球的好处 陕陕西十一选五开奖结果 19074期足彩九场奖金预测 湖北快三开将结果