react+Canvas画图

基本用法

html代码

{/* 拼图 */}
 <canvas 
        width='300' // 可设置画布的大小
        height='800'
        ref={(ref) => {
          this.canvasRef = ref;
        }}
      ></canvas>

js代码
想要在canvas区域里画图， 第一步需要取得绘图上下文，而取得上下文对象的引用，需要调用getContext()方法，并传入上下文参数"2d"，这样就能取得2D上下文对象。
2D上下文的坐标起始于canvas的左上角，起始坐标为(0, 0)，所有坐标值基于这个坐标原点计算，x越大越向右，越大越向下。
绘制2D图像将进行三步：

• 取得上下文对象（getContext(“2d”)）。
• 指定填充(fiiStyle)或描边(strokeStyle)颜色。描边的话还可以其线条末端的形状、线条相交的方式。
• 指定是填充绘制矩形(fiiRect())还是描边绘制矩形(strokeRect())。

1. fillstyle/strokStyle
   填充就是用指定的颜色来填充图形，描边，就是绘制边缘。这两种方法分别为：fillStyle和strokeStyle。
2. fillRect
   fillRect是与绘制矩形有关，其有四个参数：第一个参数表示矩形的x坐标、第二个参数表示矩形的y坐标，第三个参数表示矩形的宽度、第四个参数表示矩形的高度。还与绘制矩形有关的方法：strokeRect()、clearRect()（参数与fillRect一样）
3. strokeRect()
   lineWidth：表示描边线的宽度
   lineCap：用于控制线条末端的形状是平头(butt)、圆头(round)、方头(square)。
   lineJoin：用于控制线条相交的方式，圆交(round)、斜交(bevel)、斜接(miter)。
4. clearRact：消除指定大小的区域

componentDidMount() {
    this.createImage();
  }
// 拼图制作
  createImage = () => {
    const ctx = this.canvasRef.getContext('2d');
    console.log('ctxxxxx', ctx);
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, 100, 100);
    //获取图像的数据URL
    var imgURL = this.canvasRef.toDataURL("image/png"); //默认图片格式为png，也可以自定义设置格式。
	//开将这个imgURL的路径可在img标签中展示
  };

使用toDataURL()方法，可导出绘制的图像。该方法可以获取绘制的图像的数据URL。并可以将该URL赋值给一个img元素，这样在页面中可以显示用canvas绘制的图像了。

注意：浏览器默认将图像编码成png格式（除非另行指定）。

绘制图像

2D绘制上下文内置了对图像的支持。如果想要把一张图像绘制在画布上，就需要 drawImage()方法。调用这个方法，可以使用三种不同的参数组合。

格式：drawImage(要绘制的图像, x, y); 其中，x、y表示图像的起点坐标。

• drawImage()方法可最多接收9个参数：要绘制的图像、源图像的x坐标、源图像的y坐标、源图像的宽度、源图像的高度、目标图像的x坐标、目标图像的y坐标、目标图像的宽度、目标图像的高度。

获取外部的图像资源来将此图像绘制到画布上。

// 拼图制作
  createImage = () => {
    const ctx = this.canvasRef.getContext('2d');
    console.log('ctxxxxx', ctx);
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, 100, 100);
   //嵌入一个图像对象
   var img = new Image();
    //并获取图像的URL，当在赋值时，图像才开始加载。
    img.src = "1.jpg";
    //等图像加载完成后，才能将其绘制到画布中，所以要使用img.onload
    img.onload = function () {
    context.drawImage(img, 20, 20, 250, 270); 
    };
  };

借鉴学习：Canvas