繪制標(biāo)準(zhǔn)圓弧
在開始之前，我們優(yōu)化一下我們的作圖環(huán)境。靈感來自于上節(jié)課的紋理，如果不喜歡這個(gè)背景，我在images目錄下還提供了其他的背景圖，供大家選擇。另外把所有的樣式表都寫在了<head>下。
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);
-
- }
- </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è)圓弧；如果逆時(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()使用。其能力是可以被更為簡(jiǎn)單的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>
運(yùn)行結(jié)果：
這個(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í)著的弧線……
