這個(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)繪制弧線

下面的案例我把切線也繪制出來了，看的更清楚一些。

<!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>

演示 10-1

運(yùn)行結(jié)果：

繪制弧線

這個(gè)案例也很好說明了arcTo()的各個(gè)關(guān)鍵點(diǎn)的作用。為了更清楚的解釋，我再標(biāo)注一個(gè)分析圖。

arcTo()詳解

這里注意一下，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)不一定在弧線上： drawArcTo(context, 200, 100, 600, 100, 600, 400, 400);

(x2, y2)不一定在弧線上

(x0, y0)一定在弧線上： drawArcTo(context, 400, 100, 600, 100, 600, 400, 400);

(x0, y0)一定在弧線上

挺有意思的，它為了經(jīng)過(x0, y0)直接將切點(diǎn)和(x0, y0)連接起來形成線段。好執(zhí)著的弧線……

繪制微信對(duì)話框

大家可以嘗試著使用Canvas繪制一下微信聊天界面，作為練習(xí)與鞏固。

微信對(duì)話框

這里使用到了繪制矩形，繪制圓角矩形，繪制多線條圖形，填充顏色的一些知識(shí)。還有一些 Canvas文本API 我們并沒有說到，所以大家只要能繪制出一個(gè)大概的界面就算合格了。能夠繪制出來，也就基本掌握了Canvas API。

其實(shí)上述對(duì)話是生成出來的——“微信界面生成器網(wǎng)頁版”，可謂是微商神器。是不是非常的酷？

微信生成器網(wǎng)頁版

這只是暑假花兩天時(shí)間寫的最初版本，還尚未達(dá)到發(fā)布的地步，在我寫本節(jié)的時(shí)候，這個(gè)網(wǎng)頁的界面還正在優(yōu)化中。大家可以嘗試自己動(dòng)手做做，也可以關(guān)注和參考我的這個(gè)小項(xiàng)目github：微信界面生成器。本節(jié)就不再重復(fù)給出界面代碼了。

好了，學(xué)到這里基本上已經(jīng)學(xué)完了所有基本的Canvas繪圖的api，大家拿起自己的畫筆，自由的發(fā)揮吧！

上一篇：Ch15 縮放變換下一篇：Ch6 線條的屬性

在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

Ch10 使用切點(diǎn)繪制圓弧

arcTo()介紹

使用切點(diǎn)繪制弧線

繪制微信對(duì)話框

`arcTo()`介紹