溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“如何使用HTML5 Canvas API繪制弧線”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何使用HTML5 Canvas API繪制弧線”這篇文章吧。
繪制標(biāo)準(zhǔn)圓弧
在開始之前，我們優(yōu)化一下我們的作圖環(huán)境。靈感來自于上節(jié)課的紋理，如果不喜歡這個(gè)背景，我在images目錄下還提供了其他的背景圖，供大家選擇。另外把所有的樣式表都寫在了<head>下。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>新的畫布</title>
<style>
body { background: url("./images/bg3.jpg") repeat; }
#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
</style>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas">
你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧?。?nbsp;
</canvas>
</div>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.fillStyle = "#FFF";
context.fillRect(0,0,800,600);
}
</script>
</body>
</html>
運(yùn)行結(jié)果：
之所以要繪制一個(gè)空白的矩形填滿畫布，是因?yàn)槲覀冎罢f過，canvas是透明的，如果不設(shè)置背景色，那么它就會(huì)被我設(shè)置的<body>紋理所覆蓋，想要使其擁有背景色（白色），只有繪制矩形覆蓋canvas這一個(gè)方法。
怎么樣，是不是非常的酷？
使用arc()繪制圓弧
arc()的使用方法如下：
JavaScript Code復(fù)制內(nèi)容到剪貼板
context.arc(x,y,radius,startAngle,endAngle,anticlockwise)
前面三個(gè)參數(shù)，分別是圓心坐標(biāo)與圓半徑。startAngle、endAngle使用的是弧度值，不是角度值?；《鹊囊?guī)定是絕對(duì)的，如下圖。
anticlockwise表示繪制的方法，是順時(shí)針還是逆時(shí)針繪制。它傳入布爾值，true表示逆時(shí)針繪制，false表示順時(shí)針繪制，缺省值為false。
弧度的規(guī)定是絕對(duì)的，什么意思呢？就是指你要繪制什么樣的圓弧，弧度直接按上面的那個(gè)標(biāo)準(zhǔn)填就行了。
比如你繪制 0.5pi ~ 1pi 的圓弧，如果順時(shí)針畫，就只是左下角那1/4個(gè)圓?。蝗绻鏁r(shí)針畫，就是與之互補(bǔ)的右上角的3/4圓弧。此處自己嘗試，不再舉例。
使用切點(diǎn)繪制圓弧
arcTo()介紹:
arcTo()方法接收5個(gè)參數(shù)，分別是兩個(gè)切點(diǎn)的坐標(biāo)和圓弧半徑。這個(gè)方法是依據(jù)切線畫弧線，即由兩個(gè)切線確定一條弧線。
具體如下。
JavaScript Code復(fù)制內(nèi)容到剪貼板
arcTo(x1,y1,x2,y2,radius)
這個(gè)函數(shù)以給定的半徑繪制一條弧線，圓弧的起點(diǎn)與當(dāng)前路徑的位置到(x1, y1)點(diǎn)的直線相切，圓弧的終點(diǎn)與(x1, y1)點(diǎn)到(x2, y2)的直線相切。因此其通常配合moveTo()或lineTo()使用。其能力是可以被更為簡單的arc()替代的，其復(fù)雜就復(fù)雜在繪制方法上使用了切點(diǎn)。
使用切點(diǎn)繪制弧線:
下面的案例我把切線也繪制出來了，看的更清楚一些。
JavaScript Code復(fù)制內(nèi)容到剪貼板
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>繪制弧線</title>
<style>
body { background: url("./images/bg3.jpg") repeat; }
#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
</style>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas">
你的瀏覽器居然不支持Canvas？！趕快換一個(gè)吧??！
</canvas>
</div>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.fillStyle = "#FFF";
context.fillRect(0,0,800,600);
drawArcTo(context, 200, 200, 600, 200, 600, 400, 100);
};
function drawArcTo(cxt, x0, y0, x1, y1, x2, y2, r){
cxt.beginPath();
cxt.moveTo(x0, y0);
cxt.arcTo(x1, y1, x2, y2, r);
cxt.lineWidth = 6;
cxt.strokeStyle = "red";
cxt.stroke();
cxt.beginPath();
cxt.moveTo(x0, y0);
cxt.lineTo(x1, y1);
cxt.lineTo(x2, y2);
cxt.lineWidth = 1;
cxt.strokeStyle = "#0088AA";
cxt.stroke();
}
</script>
</body>
</html>
這個(gè)案例也很好說明了arcTo()的各個(gè)關(guān)鍵點(diǎn)的作用。為了更清楚的解釋，我再標(biāo)注一個(gè)分析圖。
這里注意一下，arcTo()繪制的起點(diǎn)是(x0, y0)，但(x0, y0)不一定是圓弧的切點(diǎn)。真正的arcTo()函數(shù)只傳入(x1, y1)和(x2, y2)。其中(x1, y1)稱為控制點(diǎn)，(x2, y2)是圓弧終點(diǎn)的切點(diǎn)，它不一定在圓弧上。但(x0, y0)一定在圓弧上。
有一點(diǎn)點(diǎn)繞，下面我們改變drawArcTo()函數(shù)的參數(shù)來試驗(yàn)一下。
(x2, y2)不一定在弧線上：
JavaScript Code復(fù)制內(nèi)容到剪貼板
drawArcTo(context, 200, 100, 600, 100, 600, 400, 400);
(x0, y0)一定在弧線上：
JavaScript Code復(fù)制內(nèi)容到剪貼板
drawArcTo(context, 400, 100, 600, 100, 600, 400, 400);
挺有意思的，它為了經(jīng)過(x0, y0)直接將切點(diǎn)和(x0, y0)連接起來形成線段。好執(zhí)著的弧線……
以上是“如何使用HTML5 Canvas API繪制弧線”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
