js如何实现一个戴眼镜的笑脸

发布时间：2021-08-03 09:43:59 作者：小新
来源：亿速云阅读：220

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

2. 获取Canvas上下文

const canvas = document.getElementById('smileFace');
const ctx = canvas.getContext('2d');

二、绘制基础笑脸

1. 绘制黄色圆形脸部

function drawFace() {
    ctx.beginPath();
    ctx.arc(200, 200, 150, 0, Math.PI * 2);
    ctx.fillStyle = '#FFD700';
    ctx.fill();
    ctx.stroke();
}

2. 添加眼睛

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();
    });
}

3. 绘制微笑嘴巴

function drawMouth() {
    ctx.beginPath();
    ctx.arc(200, 220, 80, 0.1 * Math.PI, 0.9 * Math.PI);
    ctx.lineWidth = 5;
    ctx.stroke();
}

三、添加眼镜元素

1. 绘制眼镜框

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();
}

2. 添加镜片反光效果

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();
}

3. 眼镜腿绘制

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();
}

四、完整组装与动画效果

1. 组合所有元素

function drawSmilingFaceWithGlasses() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    drawFace();
    drawEyes();
    drawMouth();
    drawGlassesFrame();
    drawGlassesLens();
    drawTemples();
}

2. 添加眨眼动画

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);

3. 添加交互效果

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行代码左右。

js如何实现一个戴眼镜的笑脸

2. 获取Canvas上下文

二、绘制基础笑脸

1. 绘制黄色圆形脸部

2. 添加眼睛

3. 绘制微笑嘴巴

三、添加眼镜元素

1. 绘制眼镜框

2. 添加镜片反光效果

3. 眼镜腿绘制

四、完整组装与动画效果

1. 组合所有元素

2. 添加眨眼动画

3. 添加交互效果

五、完整代码示例

六、效果优化建议

相关阅读