canvas图片背景实现(React)

canvas画布背景基本为透明色，给画布增加背景图片，可以创建一个Image对象，将Image对象src设置为背景图片的地址，在对象加载完成后 使用drawImage在画布上绘制图片即可。
示例如下：

		const elem = canvasRef.current;
        const canvas = elem.getContext('2d');

        let img = new Image();
        img.src = "./1.jpg"
        

         // 加载背景图片
        img.onload = () => {
            canvas.drawImage(img,0,0)
        }

也可以在img.onload中使用如下代码进行替换

		 let bg = canvas.createPattern(img,"no-repeat");     //方法指定的方向内重复指定的元素
         canvas.fillStyle = bg;  //属性设置或返回用于填充的颜色，渐变或模式
         canvas.fillRect(canvasX,canvasY,canvasWidth,canvasHeight);    //绘制以填充矩形（左上角x，左上角y，宽，高）

如果想让画布面积和背景图片面积一样大，可以在第一步的img.onload中加入如下代码即可实现

			elem.height = img.height;
            elem.width = img.width;

react组件完整如下

import React from 'react'
import { useEffect, useRef } from 'react';
import './index.css'

export default function Canvaspage() {
   
   //获取canvas元素节点
  const canvasRef = useRef(null);
  
  useEffect(() => {
      loadImg();
  })

  const loadImg = () => {

      const elem = canvasRef.current;
      const canvas = elem.getContext('2d');

      let img = new Image();
      console.log(arg);
      img.src = "./1.jpg";
      

       // 加载背景图片
      img.onload = () => {
          elem.height = img.height;
          elem.width = img.width;
          canvas.drawImage(img,0,0)
          // let bg = canvas.createPattern(img,"no-repeat");     //方法指定的方向内重复指定的元素
          // canvas.fillStyle = bg;  //属性设置或返回用于填充的颜色，渐变或模式
          // canvas.fillRect(canvasX,canvasY,canvasWidth,canvasHeight);    //绘制以填充矩形（左上角x，左上角y，宽，高）
      }

  }
  return (
      <div>
          <div>
              <canvas className="canvas_box" ref={canvasRef}></canvas>
          </div>            
      </div>
      
  )
}