Canvas

概述

<canvas>元素通过 JS 生成图像。底层是一个个像素，<canvas> 本质是一个可操作的位图（bitmap）

初始化

1、创建 Canvas

有两种方式：

在 html 中创建一个 canvas 元素

<canvas width="400" height="250">
  您的浏览器不支持 Canvas
</canvas>

通过 JS 生成一个 canvas 元素（不用插入 html 中，也可以操作）

const canvas = document.createElement('canvas')

2、获取 `CanvasRenderingContext2D`

const ctx = canvas.getContext('2d')

坐标轴

坐标原点 (0,0) 在画布的左下角，x 轴向右为正值，y轴向下为正值

JS 获取当前点击位置，在 canvas 坐标轴上的坐标

function windowToCanvas(canvas, x,  y){
    const canvasBox = canvas.getBoundingClientRect();
    return {
        x: (x - canvasBox.left) * (canvas.width / canvasBox.width),
        y: (y - canvasBox.top) * (canvas.height / canvasBox.height)
    }
}

toDataURL

作用：

将 Canvas 数据转为 Data URI 格式的图像

入参：

type：字符串，表示图像的格式。默认为image/png，另一个可用的值是image/jpeg，Chrome 浏览器还可以使用image/webp
quality：浮点数，0到1之间，表示 JPEG 和 WebP 图像的质量系数，默认值为0.92

返回值：

Data URI 格式的字符串

function convertCanvasToImage(canvas) {
  const image = new Image();
  image.src = canvas.toDataURL('image/png');
  return image;
}

toBlob

作用：

将 Canvas 数据转为Blob 对象

入参：

callback：回调函数。它接受生成的 Blob 对象作为参数。
mimeType：字符串，图像的 MIMEType 类型，默认是image/png。
quality：浮点数，0到1之间，表示图像的质量，只对image/jpeg和image/webp类型的图像有效

const canvas = document.getElementById('myCanvas');

function blobToImg(blob) {
  const newImg = document.createElement('img');
  const url = URL.createObjectURL(blob);
  newImg.onload = function () {
    // 使用完毕，释放 URL 对象
    URL.revokeObjectURL(url);
  };
  newImg.src = url;
  document.body.appendChild(newImg);
}

canvas.toBlob(blobToImg);