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 腾讯分分彩计划软件 手机版 抢庄牛牛 手机足球即时比分预测 重庆老时时彩开奖结果 拉人玩时时彩的套路 好运来快三计划免费版安卓 竟彩票极速赛车 幸运pk10快艇在线直播 310直播 稳赚不赔的投资那就是健康 篮球投注 lg游戏注册送20 重庆时时大小技巧 pk10冠军万能6码公式 北京pk10玩法规则 哪个游戏平台有21点