欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

如何使用HTML5CanvasAPI繪制弧線

這篇文章主要為大家展示了“如何使用HTML5 Canvas API繪制弧線”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何使用HTML5 Canvas API繪制弧線”這篇文章吧。

創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的肥鄉(xiāng)網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

繪制標(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è)吧??！   

    </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ī)定是絕對的，如下圖。

anticlockwise表示繪制的方法，是順時(shí)針還是逆時(shí)針繪制。它傳入布爾值，true表示逆時(shí)針繪制，false表示順時(shí)針繪制，缺省值為false。

弧度的規(guī)定是絕對的，什么意思呢？就是指你要繪制什么樣的圓弧，弧度直接按上面的那個(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()使用。其能力是可以被更為簡單的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í)著的弧線&hellip;&hellip;

以上是“如何使用HTML5 Canvas API繪制弧線”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：如何使用HTML5CanvasAPI繪制弧線
網(wǎng)頁URL：http://chinadenli.net/article32/gicdpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、品牌網(wǎng)站建設(shè)、軟件開發(fā)、品牌網(wǎng)站制作、云服務(wù)器、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)