溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了js如何實現一個戴眼鏡的笑臉，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
首先我給大家一個圖片示例：
大家可以根據這個圖來編寫代碼，看看怎么樣才能實現這樣的圖？方法肯定不止一種，大家可以在本地先試試~
下面我給大家介紹一種方法，是使用moveto()函數來實現。
完整代碼如下：
<!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>搞定！運行該代碼會出現跟上圖一樣的效果。
那么在這段代碼中，要介紹2個重要的方法moveTo()和arc()方法。
moveTo() 方法用于把路徑移動到畫布中的指定點，不創建線條，其js語法是“context.moveTo(x,y);”，參數x表示路徑的目標位置的 x 坐標，y表示路徑的目標位置的 y 坐標。
arc()方法用于創建弧/曲線（用于創建圓或部分圓），其js語法是“context.arc(x,y,r,sAngle,eAngle,counterclockwise);”，注意如需通過 arc() 來創建圓，請把起始角設置為 0，結束角設置為 2*Math.PI。
其中參數x圓的中心的 x 坐標；
y表示圓的中心的 y 坐標；
r表示圓的半徑；
sAngle表示起始角，以弧度計。（弧的圓形的三點鐘位置是 0 度）；
eAngle表示結束角，以弧度計。
counterclockwise可選，規定應該逆時針還是順時針繪圖。False = 順時針，true = 逆時針。
感謝你能夠認真閱讀完這篇文章，希望小編分享的“js如何實現一個戴眼鏡的笑臉”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
