如何在React中使用SVG和Canvas繪圖

在React中使用SVG和Canvas繪圖是非常常見的任務。下面是使用SVG和Canvas繪圖的一些基本步驟：

1. 使用SVG繪圖： 首先，您可以在React組件中直接使用SVG元素來繪制圖形。例如，您可以使用<rect>、<circle>、<line>等元素來繪制矩形、圓形和線條等形狀。您可以將SVG元素作為組件的返回值，然后將其渲染到頁面上。

import React from 'react';

function SvgComponent() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
      <rect x="10" y="10" width="80" height="80" fill="red" />
      <circle cx="50" cy="50" r="40" fill="blue" />
      <line x1="10" y1="90" x2="90" y2="10" stroke="green" />
    </svg>
  );
}

export default SvgComponent;

2. 使用Canvas繪圖： 要在React中使用Canvas繪圖，您可以在組件的componentDidMount生命周期方法中獲取Canvas元素的上下文，并使用上下文方法來繪制圖形。您可以在Canvas繪圖時使用2D或WebGL上下文。

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

function CanvasComponent() {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');

    ctx.fillStyle = 'red';
    ctx.fillRect(10, 10, 80, 80);

    ctx.fillStyle = 'blue';
    ctx.beginPath();
    ctx.arc(50, 50, 40, 0, 2 * Math.PI);
    ctx.fill();

    ctx.strokeStyle = 'green';
    ctx.beginPath();
    ctx.moveTo(10, 90);
    ctx.lineTo(90, 10);
    ctx.stroke();
  }, []);

  return <canvas ref={canvasRef} width={100} height={100} />;
}

export default CanvasComponent;

通過這些簡單的示例，您可以開始在React中使用SVG和Canvas進行繪圖。根據您的需求和復雜性，您可以進一步探索SVG和Canvas的各種功能和選項。