当前位置：首页 > JavaScript

js实现笑脸

2026-04-06 00:16:33JavaScript

使用Canvas绘制笑脸

在HTML中创建Canvas元素，通过JavaScript绘制笑脸。以下代码展示了如何绘制一个简单的笑脸：

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

// 绘制黄色圆形脸部
ctx.beginPath();
ctx.arc(100, 100, 80, 0, Math.PI * 2);
ctx.fillStyle = 'yellow';
ctx.fill();
ctx.stroke();

// 绘制左眼
ctx.beginPath();
ctx.arc(70, 70, 10, 0, Math.PI * 2);
ctx.fillStyle = 'black';
ctx.fill();

// 绘制右眼
ctx.beginPath();
ctx.arc(130, 70, 10, 0, Math.PI * 2);
ctx.fill();

// 绘制微笑的嘴
ctx.beginPath();
ctx.arc(100, 100, 50, 0, Math.PI);
ctx.stroke();

使用SVG创建笑脸

通过SVG矢量图形创建笑脸，这种方法可以缩放而不失真：

js实现笑脸

<svg width="200" height="200" viewBox="0 0 200 200">
  <!-- 脸部 -->
  <circle cx="100" cy="100" r="80" fill="yellow" stroke="black"/>

  <!-- 左眼 -->
  <circle cx="70" cy="70" r="10" fill="black"/>

  <!-- 右眼 -->
  <circle cx="130" cy="70" r="10" fill="black"/>

  <!-- 微笑的嘴 -->
  <path d="M 50 100 Q 100 180 150 100" stroke="black" fill="transparent"/>
</svg>

使用CSS绘制笑脸

纯CSS方法创建笑脸，适合简单的界面元素：

js实现笑脸

<div class="smiley-face">
  <div class="left-eye"></div>
  <div class="right-eye"></div>
  <div class="smile"></div>
</div>

<style>
.smiley-face {
  width: 200px;
  height: 200px;
  background: yellow;
  border-radius: 50%;
  position: relative;
  border: 2px solid black;
}

.left-eye, .right-eye {
  width: 20px;
  height: 20px;
  background: black;
  border-radius: 50%;
  position: absolute;
  top: 50px;
}

.left-eye { left: 50px; }
.right-eye { right: 50px; }

.smile {
  width: 100px;
  height: 50px;
  border-bottom: 5px solid black;
  border-radius: 0 0 50px 50px;
  position: absolute;
  bottom: 40px;
  left: 50px;
}
</style>

使用Emoji表情

最简单的实现方式是直接使用Unicode笑脸表情：

// 直接输出笑脸表情
console.log('😊');
document.getElementById('smile').textContent = '😊';

使用第三方库

使用如Three.js等库创建3D笑脸：

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建脸部球体
const faceGeometry = new THREE.SphereGeometry(1, 32, 32);
const faceMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00 });
const face = new THREE.Mesh(faceGeometry, faceMaterial);
scene.add(face);

// 创建眼睛
const eyeGeometry = new THREE.SphereGeometry(0.1, 16, 16);
const eyeMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });

const leftEye = new THREE.Mesh(eyeGeometry, eyeMaterial);
leftEye.position.set(-0.3, 0.2, 0.8);
scene.add(leftEye);

const rightEye = new THREE.Mesh(eyeGeometry, eyeMaterial);
rightEye.position.set(0.3, 0.2, 0.8);
scene.add(rightEye);

// 创建微笑曲线
const smileCurve = new THREE.EllipseCurve(
  0, 0,            // 中心点
  0.5, 0.3,        // x半径, y半径
  0, Math.PI,      // 起始角, 终止角
  false            // 顺时针
);
const smilePoints = smileCurve.getPoints(50);
const smileGeometry = new THREE.BufferGeometry().setFromPoints(smilePoints);
const smileLine = new THREE.Line(smileGeometry, new THREE.LineBasicMaterial({ color: 0x000000 }));
smileLine.position.set(0, -0.3, 0.8);
smileLine.rotation.x = -Math.PI / 8;
scene.add(smileLine);

camera.position.z = 3;

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();