HTML5 Canvas弧線教程
弧度是角度測量的標(biāo)準(zhǔn)單位，用于許多數(shù)學(xué)領(lǐng)域。角度的弧度測量值在數(shù)值上等于單位圓相應(yīng)弧的長度，因此 1 弧度略低于 57.3 度（當(dāng)弧長等于半徑時(shí)）?；《扔煞?rad 表示，另一個(gè)符號是上標(biāo)字母 c，下面sojson給大家詳細(xì)介紹。
繪制圓弧
您可以使用 arc() 方法在畫布上繪制圓弧。在詳細(xì)介紹繪制圓弧之前，先簡要概述一下弧度和角度：
弧度是角度測量的標(biāo)準(zhǔn)單位，用于許多數(shù)學(xué)領(lǐng)域。角度的弧度測量值在數(shù)值上等于單位圓相應(yīng)弧的長度，因此 1 弧度略低于 57.3 度（當(dāng)弧長等于半徑時(shí)）?；《扔煞?rad 表示，另一個(gè)符號是上標(biāo)字母 c。例如，1.3 弧度的值可以寫為 1.3 rad 或 1.3 c。見下圖：
使用以下公式將度數(shù)轉(zhuǎn)換為弧度：
var radians = degrees * Math.PI/180
arc 方法：arc(x, y, 半徑, startAngle, endAngle, 方向)
| 參數(shù) | 類型 | 描述 |
|---|---|---|
X | 數(shù)字 | x 坐標(biāo)（以像素為單位），相對于畫布矩形左上角的圓弧中心點(diǎn)。 |
| y | 數(shù)字 | 相對于畫布矩形左上角的圓弧中心點(diǎn)的 y 坐標(biāo)（以像素為單位）。 |
| 半徑 | 數(shù)字 | 圓弧路徑所遵循的距點(diǎn) (x,y) 的半徑或距離。 |
| 起始角度 | 數(shù)字 | 起始角度，以弧度為單位，順時(shí)針方向，0 對應(yīng)于圓右側(cè)的 3:00 點(diǎn)鐘位置。 |
| 結(jié)束角 | 數(shù)字 | 結(jié)束角度，以弧度為單位。 |
| 方向 | 布爾值 | true ：從開始到結(jié)束以逆時(shí)針方向繪制圓弧。 false ：從開始到結(jié)束以順時(shí)針方向繪制圓弧 |
示例：使用 arc() 方法的 HTML5 Canvas 弧線
以下 Web 文檔創(chuàng)建了一個(gè)簡單的弧線。
輸出 ：
代碼：
<!DOCTYPE html>
<html>
<head>
<title>Sample arcs example</title></head>
<body>
<canvas id="demoCanvas" width="340" height="340"> canvas</canvas>
<script>
var canvas = document.getElementById('demoCanvas');
var ctx = canvas.getContext('2d');
var x = 90;
var y = 100;
var radius = 75;
var startAngle = 1.1 * Math.PI;
var endAngle = 1.9 * Math.PI;
var counterClockwise = false;
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
ctx.lineWidth = 10;
// line color
ctx.strokeStyle = 'green';
ctx.stroke();
</script>
</body>
</html>示例：HTML5 Canvas 雜項(xiàng)弧線
以下 Web 文檔創(chuàng)建各種類型的弧。
輸出 ：
代碼 ：
<!DOCTYPE html>
<html>
<head>
<title>Sample arcs example</title>
<script type="text/javascript">
function misc_curves()
{
var canvas = document.getElementById("Mycanvas");
if (canvas.getContext)
{
var context = canvas.getContext("2d");
for (var i = 0; i < 2; i++)
// Step through two rows.
{
// Step through three versions.
for (var j = 0; j < 3; j++)
{
context.beginPath();
// The x-coordinate.
var x = 35 + j * 50;
// The y-coordinate.
var y = 35 + i * 50;
// The arc radius.
var radius = 20;
// The starting point on the circle.
var startAngle = 0;
//end point on the circle.
var endAngle = Math.PI + (Math.PI * j) / 2;
// The direction of drawing.
var anticlockwise = i % 2 === 0 ? false : true;
// Create the arc path.
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
// Show the arcs
context.stroke();
}
}
}
}
</script>
</head>
<body onload="misc_curves();">
<canvas id="Mycanvas" width="340" height="340"> canvas</canvas>
</body>
</html>畫圓圈
弧是圓的一部分。要繪制圓，請繪制起始角為 0、結(jié)束角為 2 x Pi 的圓弧。這是一個(gè)例子：
輸出 ：
<!DOCTYPE html>
<html>
<head>
<title>Sample arcs example</title></head>
<body>
<canvas id="demoCanvas" width="340" height="340"> canvas</canvas>
<script>
var canvas = document.getElementById('demoCanvas');
var ctx = canvas.getContext('2d');
var x = 90;
var y = 100;
var radius = 75;
var startAngle = 0;
var endAngle = 2 * Math.PI;
var counterClockwise = false;
ctx.beginPath();
ctx.arc(x, y, radius, startAngle, endAngle, counterClockwise);
ctx.lineWidth = 10;
// line color
ctx.strokeStyle = 'blue';
ctx.stroke();
</script>
</body>
</html>版權(quán)所屬：SO JSON在線解析
原文地址：http://zijieyoumin.cn/blog/525.html
轉(zhuǎn)載時(shí)必須以鏈接形式注明原始出處及本聲明。
如果本文對你有幫助，那么請你贊助我，讓我更有激情的寫下去，幫助更多的人。
