# JS如何實現一個戴眼鏡的笑臉
本文將詳細介紹如何使用HTML5 Canvas和JavaScript繪制一個戴眼鏡的卡通笑臉，涵蓋從基礎圖形繪制到組合元素的完整實現過程。
## 一、準備工作
### 1. HTML結構
```html
<!DOCTYPE html>
<html>
<head>
<title>戴眼鏡的笑臉</title>
<style>
canvas {
border: 1px solid #ddd;
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<canvas id="smileFace" width="400" height="400"></canvas>
<script src="script.js"></script>
</body>
</html>
const canvas = document.getElementById('smileFace');
const ctx = canvas.getContext('2d');
function drawFace() {
ctx.beginPath();
ctx.arc(200, 200, 150, 0, Math.PI * 2);
ctx.fillStyle = '#FFD700';
ctx.fill();
ctx.stroke();
}
function drawEyes() {
// 左眼
ctx.beginPath();
ctx.arc(150, 150, 20, 0, Math.PI * 2);
ctx.fillStyle = 'white';
ctx.fill();
ctx.stroke();
// 右眼
ctx.beginPath();
ctx.arc(250, 150, 20, 0, Math.PI * 2);
ctx.fillStyle = 'white';
ctx.fill();
ctx.stroke();
// 瞳孔
[ [150,150], [250,150] ].forEach(pos => {
ctx.beginPath();
ctx.arc(pos[0], pos[1], 8, 0, Math.PI * 2);
ctx.fillStyle = 'black';
ctx.fill();
});
}
function drawMouth() {
ctx.beginPath();
ctx.arc(200, 220, 80, 0.1 * Math.PI, 0.9 * Math.PI);
ctx.lineWidth = 5;
ctx.stroke();
}
function drawGlassesFrame() {
ctx.beginPath();
// 左鏡框
ctx.ellipse(150, 150, 40, 30, 0, 0, Math.PI * 2);
// 右鏡框
ctx.ellipse(250, 150, 40, 30, 0, 0, Math.PI * 2);
// 鼻梁連接
ctx.moveTo(190, 150);
ctx.lineTo(210, 150);
ctx.lineWidth = 3;
ctx.strokeStyle = '#333';
ctx.stroke();
}
function drawGlassesLens() {
// 左鏡片高光
ctx.beginPath();
ctx.ellipse(160, 140, 15, 10, Math.PI/4, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255,255,255,0.7)';
ctx.fill();
// 右鏡片高光
ctx.beginPath();
ctx.ellipse(260, 140, 15, 10, Math.PI/4, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255,255,255,0.7)';
ctx.fill();
}
function drawTemples() {
ctx.beginPath();
// 左鏡腿
ctx.moveTo(110, 150);
ctx.lineTo(50, 120);
// 右鏡腿
ctx.moveTo(290, 150);
ctx.lineTo(350, 120);
ctx.lineWidth = 4;
ctx.strokeStyle = '#555';
ctx.stroke();
}
function drawSmilingFaceWithGlasses() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawFace();
drawEyes();
drawMouth();
drawGlassesFrame();
drawGlassesLens();
drawTemples();
}
let isBlinking = false;
function blinkAnimation() {
isBlinking = true;
// 用白色橢圓覆蓋眼睛
ctx.beginPath();
ctx.ellipse(150, 150, 25, 5, 0, 0, Math.PI * 2);
ctx.ellipse(250, 150, 25, 5, 0, 0, Math.PI * 2);
ctx.fillStyle = '#FFD700';
ctx.fill();
setTimeout(() => {
isBlinking = false;
drawSmilingFaceWithGlasses();
}, 200);
}
// 每3秒眨眼一次
setInterval(() => {
if(!isBlinking) blinkAnimation();
}, 3000);
canvas.addEventListener('click', () => {
// 點擊時改變眼鏡顏色
ctx.strokeStyle = `hsl(${Math.random()*360}, 80%, 50%)`;
drawSmilingFaceWithGlasses();
});
// script.js
const canvas = document.getElementById('smileFace');
const ctx = canvas.getContext('2d');
// 所有繪制函數...
// [此處包含前面所有繪制函數]
// 初始化繪制
drawSmilingFaceWithGlasses();
const gradient = ctx.createRadialGradient(200,200,50,200,200,150);
gradient.addColorStop(0, '#FFEE00');
gradient.addColorStop(1, '#FFAA00');
ctx.fillStyle = gradient;
使用requestAnimationFrame實現平滑動畫
響應式調整：
function resizeCanvas() {
const size = Math.min(window.innerWidth-40, 600);
canvas.width = size;
canvas.height = size;
drawSmilingFaceWithGlasses();
}
通過以上步驟，我們實現了一個生動的戴眼鏡笑臉，包含了基礎繪制、動畫效果和交互功能。讀者可以在此基礎上繼續擴展，如添加腮紅、改變表情或設計更復雜的眼鏡樣式。 “`
注：實際實現時需將所有JavaScript代碼合并到一個文件中，本文為展示清晰進行了分塊處理。完整實現約需150行代碼左右。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
