当前位置：首页 > JavaScript

js实现笑脸

2026-02-01 07:44:35JavaScript

实现笑脸的几种方法

使用Canvas绘制笑脸

Canvas是HTML5提供的绘图API，可以通过JavaScript动态绘制图形。以下是一个简单的笑脸绘制示例：

const canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 200;
document.body.appendChild(canvas);

const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 80, 0, Math.PI * 2); // 绘制脸部
ctx.fillStyle = 'yellow';
ctx.fill();

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

ctx.beginPath();
ctx.arc(100, 100, 40, 0, Math.PI); // 嘴巴
ctx.strokeStyle = 'black';
ctx.lineWidth = 5;
ctx.stroke();

使用SVG创建笑脸

SVG是矢量图形格式，可以通过HTML直接嵌入：

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="M60 120 Q100 160 140 120" stroke="black" fill="transparent" stroke-width="5"/>
</svg>

使用CSS绘制笑脸

纯CSS也能创建简单的笑脸图形：

js实现笑脸

<div class="face">
  <div class="eye left"></div>
  <div class="eye right"></div>
  <div class="mouth"></div>
</div>

<style>
.face {
  width: 200px;
  height: 200px;
  background: yellow;
  border-radius: 50%;
  position: relative;
}
.eye {
  width: 20px;
  height: 20px;
  background: black;
  border-radius: 50%;
  position: absolute;
  top: 50px;
}
.left { left: 50px; }
.right { right: 50px; }
.mouth {
  width: 80px;
  height: 40px;
  border-bottom: 5px solid black;
  border-radius: 0 0 50% 50%;
  position: absolute;
  bottom: 50px;
  left: 60px;
}
</style>

使用Emoji表情符号

最简单的方法是直接使用现成的Emoji表情：

document.body.innerHTML = '😊';

使用第三方库

使用像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, 32, 32);
const eyeMaterial = new THREE.MeshBasicMaterial({color: 0x000000});

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

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

// 创建嘴巴
const mouthGeometry = new THREE.TorusGeometry(0.5, 0.05, 16, 100, Math.PI);
const mouthMaterial = new THREE.MeshBasicMaterial({color: 0x000000});
const mouth = new THREE.Mesh(mouthGeometry, mouthMaterial);
mouth.rotation.x = Math.PI;
mouth.position.z = 0.7;
scene.add(mouth);

camera.position.z = 5;

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

每种方法都有其适用场景：Canvas适合动态图形，SVG适合矢量图形，CSS适合简单UI元素，Emoji适合快速实现，而Three.js则适合3D效果。