当前位置：首页 > React

React如何用canvas画出人脸

2026-01-25 19:26:20React

使用React和Canvas绘制人脸

在React中使用Canvas绘制人脸可以通过以下方法实现。这里以绘制一个简化的人脸为例，涵盖基本的脸部轮廓、眼睛、鼻子和嘴巴。

创建Canvas组件

创建一个React组件，初始化Canvas并设置其宽度和高度。在useEffect中调用绘制函数，确保Canvas渲染完成后执行绘制逻辑。

import React, { useEffect, useRef } from 'react';

const FaceCanvas = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    drawFace(ctx);
  }, []);

  const drawFace = (ctx) => {
    // 绘制逻辑
  };

  return (
    <canvas
      ref={canvasRef}
      width={400}
      height={400}
      style={{ border: '1px solid black' }}
    />
  );
};

export default FaceCanvas;

绘制脸部轮廓

使用arc方法绘制一个圆形作为脸部轮廓。设置填充颜色和描边样式。

const drawFace = (ctx) => {
  // 脸部轮廓
  ctx.beginPath();
  ctx.arc(200, 200, 150, 0, Math.PI * 2);
  ctx.fillStyle = '#FFDBAC';
  ctx.fill();
  ctx.strokeStyle = '#000';
  ctx.stroke();
};

绘制眼睛

使用arc方法绘制两个圆形作为眼睛，并填充黑色瞳孔。调整位置和大小以实现对称效果。

// 左眼
ctx.beginPath();
ctx.arc(150, 170, 30, 0, Math.PI * 2);
ctx.fillStyle = 'white';
ctx.fill();
ctx.stroke();

ctx.beginPath();
ctx.arc(150, 170, 15, 0, Math.PI * 2);
ctx.fillStyle = 'black';
ctx.fill();

// 右眼
ctx.beginPath();
ctx.arc(250, 170, 30, 0, Math.PI * 2);
ctx.fillStyle = 'white';
ctx.fill();
ctx.stroke();

ctx.beginPath();
ctx.arc(250, 170, 15, 0, Math.PI * 2);
ctx.fillStyle = 'black';
ctx.fill();

绘制鼻子

使用arc或lineTo方法绘制鼻子。这里用一个简单的三角形表示鼻子。

ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(180, 250);
ctx.lineTo(220, 250);
ctx.closePath();
ctx.fillStyle = '#FFA07A';
ctx.fill();
ctx.stroke();

绘制嘴巴

使用arc方法绘制一个半圆作为嘴巴。调整起始和结束角度以实现微笑效果。

ctx.beginPath();
ctx.arc(200, 250, 60, 0, Math.PI);
ctx.strokeStyle = 'red';
ctx.lineWidth = 3;
ctx.stroke();

完整代码示例

将以上部分组合起来，完整的绘制人脸代码如下：

import React, { useEffect, useRef } from 'react';

const FaceCanvas = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    drawFace(ctx);
  }, []);

  const drawFace = (ctx) => {
    // 脸部轮廓
    ctx.beginPath();
    ctx.arc(200, 200, 150, 0, Math.PI * 2);
    ctx.fillStyle = '#FFDBAC';
    ctx.fill();
    ctx.strokeStyle = '#000';
    ctx.stroke();

    // 左眼
    ctx.beginPath();
    ctx.arc(150, 170, 30, 0, Math.PI * 2);
    ctx.fillStyle = 'white';
    ctx.fill();
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(150, 170, 15, 0, Math.PI * 2);
    ctx.fillStyle = 'black';
    ctx.fill();

    // 右眼
    ctx.beginPath();
    ctx.arc(250, 170, 30, 0, Math.PI * 2);
    ctx.fillStyle = 'white';
    ctx.fill();
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(250, 170, 15, 0, Math.PI * 2);
    ctx.fillStyle = 'black';
    ctx.fill();

    // 鼻子
    ctx.beginPath();
    ctx.moveTo(200, 200);
    ctx.lineTo(180, 250);
    ctx.lineTo(220, 250);
    ctx.closePath();
    ctx.fillStyle = '#FFA07A';
    ctx.fill();
    ctx.stroke();

    // 嘴巴
    ctx.beginPath();
    ctx.arc(200, 250, 60, 0, Math.PI);
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 3;
    ctx.stroke();
  };

  return (
    <canvas
      ref={canvasRef}
      width={400}
      height={400}
      style={{ border: '1px solid black' }}
    />
  );
};

export default FaceCanvas;