溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“如何使用HTML5 Canvas API繪制弧線”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何使用HTML5 Canvas API繪制弧線”這篇文章吧。
繪制標準圓弧
在開始之前，我們優化一下我們的作圖環境。靈感來自于上節課的紋理，如果不喜歡這個背景，我在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？！趕快換一個吧！！
</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>
運行結果：
之所以要繪制一個空白的矩形填滿畫布，是因為我們之前說過，canvas是透明的，如果不設置背景色，那么它就會被我設置的<body>紋理所覆蓋，想要使其擁有背景色（白色），只有繪制矩形覆蓋canvas這一個方法。
怎么樣，是不是非常的酷？
使用arc()繪制圓弧
arc()的使用方法如下：
JavaScript Code復制內容到剪貼板
context.arc(x,y,radius,startAngle,endAngle,anticlockwise)
前面三個參數，分別是圓心坐標與圓半徑。startAngle、endAngle使用的是弧度值，不是角度值。弧度的規定是絕對的，如下圖。
anticlockwise表示繪制的方法，是順時針還是逆時針繪制。它傳入布爾值，true表示逆時針繪制，false表示順時針繪制，缺省值為false。
弧度的規定是絕對的，什么意思呢？就是指你要繪制什么樣的圓弧，弧度直接按上面的那個標準填就行了。
比如你繪制 0.5pi ~ 1pi 的圓弧，如果順時針畫，就只是左下角那1/4個圓弧；如果逆時針畫，就是與之互補的右上角的3/4圓弧。此處自己嘗試，不再舉例。
使用切點繪制圓弧
arcTo()介紹:
arcTo()方法接收5個參數，分別是兩個切點的坐標和圓弧半徑。這個方法是依據切線畫弧線，即由兩個切線確定一條弧線。
具體如下。
JavaScript Code復制內容到剪貼板
arcTo(x1,y1,x2,y2,radius)
這個函數以給定的半徑繪制一條弧線，圓弧的起點與當前路徑的位置到(x1, y1)點的直線相切，圓弧的終點與(x1, y1)點到(x2, y2)的直線相切。因此其通常配合moveTo()或lineTo()使用。其能力是可以被更為簡單的arc()替代的，其復雜就復雜在繪制方法上使用了切點。
使用切點繪制弧線:
下面的案例我把切線也繪制出來了，看的更清楚一些。
JavaScript Code復制內容到剪貼板
<!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？！趕快換一個吧！！
</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>
這個案例也很好說明了arcTo()的各個關鍵點的作用。為了更清楚的解釋，我再標注一個分析圖。
這里注意一下，arcTo()繪制的起點是(x0, y0)，但(x0, y0)不一定是圓弧的切點。真正的arcTo()函數只傳入(x1, y1)和(x2, y2)。其中(x1, y1)稱為控制點，(x2, y2)是圓弧終點的切點，它不一定在圓弧上。但(x0, y0)一定在圓弧上。
有一點點繞，下面我們改變drawArcTo()函數的參數來試驗一下。
(x2, y2)不一定在弧線上：
JavaScript Code復制內容到剪貼板
drawArcTo(context, 200, 100, 600, 100, 600, 400, 400);
(x0, y0)一定在弧線上：
JavaScript Code復制內容到剪貼板
drawArcTo(context, 400, 100, 600, 100, 600, 400, 400);
挺有意思的，它為了經過(x0, y0)直接將切點和(x0, y0)連接起來形成線段。好執著的弧線……
以上是“如何使用HTML5 Canvas API繪制弧線”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
