React中使用Canvas——放飞想象力!

今天我们来看看如何在前端项目中绘图，即，Canvas画布的使用。

歪哥以React + TypeScript作为代码示例。

首先，我们需要创建一块画布，宽高自己指定，以及进行一些初始化工作，如下

const canvasRef = useRef<HTMLCanvasElement>(null);
const [ctx, setCtx] = useState<CanvasRenderingContext2D>();
useEffect(() => {
    if (canvasRef.current) {
      const canvas = canvasRef.current;
      const ctx = canvas.getContext('2d');
      if (ctx) {
        ctx.fillStyle = '#FFFFFF' // 白底
        ctx.fillRect(0, 0, canvas.width, canvas.height)
        setCtx(ctx)
        // 绘制内容
        draw();
      }
    }
}, []);

const draw = () => {
    // 在这里编写绘制的代码
};

我们来看一些基础图形的绘制，示例如下

// 画直线
function drawLine() {
  ctx.lineWidth = 2
  ctx.strokeStyle = `rgb(255, 0, 0)`
  ctx.beginPath()
  ctx.moveTo(100, 100)
  ctx.lineTo(300, 100)
  ctx.stroke()
}

上面绘制了一条红色的水平直线，相信聪明的你已经看懂啦！

引申一下，我们可以画封闭的线条，也就是图形，如下

// 画矩形
function drawRectangle() {
  ctx.beginPath()
  ctx.moveTo(100, 100)
  ctx.lineTo(300, 100)
  ctx.lineTo(300, 200)
  ctx.lineTo(100, 200)
  ctx.closePath()
  ctx.fillStyle= "rgb(0, 0, 0)"
  context.fill()  // 填充
}

这样就绘制了一个矩形，并且填充了黑色。

我们还可以插入图片，如下

// 插入图片
function drawImg() {
  const img = new Image();
  img.src = "demo.jpg";
  img.onload = () => {
    const scale = 250.0 / 500.0;
    const width = img.width * scale;
    const height = img.height * scale;
    ctx.drawImage(img, 100, 100, width, height);
  }
}

我们可以将图片素材放在项目的public目录下，这样直接引用其名字就可以使用啦，代码中还使用了缩放，这里scale = 250/500意思就是想让图片占画布一半高度！

然后我们来看一下如何插入文本

// 插入文本
function drawText() {
  ctx.fillStyle = `rgb(0, 0, 0)`
  ctx.fillText("Hello", 100, 100);
}

可以设置文本样式，这里没有仔细写了，感兴趣可以自己学习一下。

还有一个比较重要的就是曲线，canvas中支持画贝塞尔曲线，也就是起终点+两个控制点，如下

// 贝塞尔曲线
function drawCurve() {
  ctx.lineWidth = 2
  ctx.strokeStyle = `rgb(0, 0, 0)`
  ctx.beginPath()
  ctx.moveTo(100, 100)  // 起点
  ctx.bezierCurveTo(
    150, 150,  // 控制点1
    200, 150,  // 控制点2
    250, 100   // 终点
  )
  ctx.stroke()
}

这样就绘制了一条微笑曲线

常用的绘制元素就列举这些吧，现在你对Canvas的使用是不是有了基本的了解呢，赶快发挥你天马行空的想象力，绘制美丽的画卷吧！