js如何實(shí)現(xiàn)一個(gè)戴眼鏡的笑臉

發(fā)布時(shí)間：2021-08-03 09:43:59 來(lái)源：億速云閱讀：191 作者：小新欄目：web開發(fā)

這篇文章主要介紹了js如何實(shí)現(xiàn)一個(gè)戴眼鏡的笑臉，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

首先我給大家一個(gè)圖片示例：

大家可以根據(jù)這個(gè)圖來(lái)編寫代碼，看看怎么樣才能實(shí)現(xiàn)這樣的圖？方法肯定不止一種，大家可以在本地先試試~

下面我給大家介紹一種方法，是使用moveto()函數(shù)來(lái)實(shí)現(xiàn)。

完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body onload="draw();">
<canvas id="canvas" width="250" height="250"></canvas>
<script>
    function draw()
    {
        var canvas = document.getElementById('canvas');
        if (canvas.getContext)
        {
            var context = canvas.getContext('2d');
            context.beginPath();
            // 外圓
 context.arc(75,75,50,0,Math.PI*2,true);
            context.moveTo(110,75);
            // 嘴巴
 context.arc(75,75,35,0,Math.PI,false);
            // 左眼和右眼
 context.moveTo(55,65);
            context.arc(60,65,5,0,Math.PI*2,true);
            context.arc(90,65,5,0,Math.PI*2,true);
            context.stroke();
        }
    }
    </script>
</body>
</html>

搞定！運(yùn)行該代碼會(huì)出現(xiàn)跟上圖一樣的效果。

那么在這段代碼中，要介紹2個(gè)重要的方法moveTo()和arc()方法。

moveTo() 方法用于把路徑移動(dòng)到畫布中的指定點(diǎn)，不創(chuàng)建線條，其js語(yǔ)法是“context.moveTo(x,y);”，參數(shù)x表示路徑的目標(biāo)位置的 x 坐標(biāo)，y表示路徑的目標(biāo)位置的 y 坐標(biāo)。

arc()方法用于創(chuàng)建弧/曲線（用于創(chuàng)建圓或部分圓），其js語(yǔ)法是“context.arc(x,y,r,sAngle,eAngle,counterclockwise);”，注意如需通過(guò) arc() 來(lái)創(chuàng)建圓，請(qǐng)把起始角設(shè)置為 0，結(jié)束角設(shè)置為 2*Math.PI。

其中參數(shù)x圓的中心的 x 坐標(biāo)；

y表示圓的中心的 y 坐標(biāo)；

r表示圓的半徑；

sAngle表示起始角，以弧度計(jì)。（弧的圓形的三點(diǎn)鐘位置是 0 度）；

eAngle表示結(jié)束角，以弧度計(jì)。

counterclockwise可選，規(guī)定應(yīng)該逆時(shí)針還是順時(shí)針繪圖。False = 順時(shí)針，true = 逆時(shí)針。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“js如何實(shí)現(xiàn)一個(gè)戴眼鏡的笑臉”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

js如何實(shí)現(xiàn)一個(gè)戴眼鏡的笑臉

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽