canvas 是 HTML5 的新特性，它允许我们使用 canvas 元素在网页上通过 JavaScript 绘制图像 （可以在 HTML 页面使用多个 canvas 元素）

1、绘图流程:

// 1、编写canvas标签，指定宽高（注意）；
<canvas id="canvas" width="800" height="800"></canvas>;
// 2、获取canvas DOM对象；
const canvas = document.getElementById("canvas");
// 3、获取Canvas对象；
const ctx = canvas.getContext("2d"); // 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
// 4、设置绘图属性；
ctx.fillStyle = "red"; //设置填充色
// 5、调用绘图API。
ctx.fillRect(0, 0, 50, 50); // 绘制矩形

2、canvas 路径

常用的方法：

（1）moveTo(x,y)–定义线条开始坐标

（2）lineTo(x,y)–定义线条结束坐标

示例 1、绘制线段

<canvas id="canvas" width="800" height="800"></canvas>;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath(); // 开始绘制路径
ctx.lineWidth = 1; // 线条宽度
ctx.strokeStyle = "green"; // 线条填充色
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke(); // 绘制线段

示例 2、绘制圆形

arc(x,y,r,start,stop) x 轴 y 轴 r 半径

<canvas id="canvas" width="800" height="800"></canvas>;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = "green"; // 圆形边框色
ctx.fillStyle = "red"; // 圆形填充色
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

示例 3、绘制矩形 （代码见绘图流程）

3、使用 canvas 压缩图片

<!--编写input标签 指定type类型为file-->
<input type="file" id="upload" />

压缩图片js代码(点击展开)

// 设置上传图片类型  上传图片的容量大小
const ACCEPT = ["image/jpg", "image/png", "image/jpeg"]; // 限定图片文件类型
const MAXSIZE = 1024 * 1024 * 3; // 限定图片最大容量
const MAXSIZE_STR = "3MB";

function convertImageToBase64(file, cb) {
  let reader = new FileReader();
  reader.addEventListener("load", function (e) {
    const base64Image = e.target.result; // 获取文件内容，等同于 reader.result
    cb(base64Image);
    reader = null;
  });
  reader.readAsDataURL(file); // 读取 file 对象中的内容
}
// 图片是否压缩的判断
function compress(base64Image, cb) {
  let maxW = 1024;
  let maxH = 1024;
  const image = new Image();
  image.addEventListener("load", function () {
    let ratio; // 压缩比
    let needCompress = false; // 是否需要压缩
    if (maxW < image.naturalWidth) {
      needCompress = true;
      ratio = image.naturalWidth / maxW;
      maxH = image.naturalHeight / ratio;
    }
    if (maxH < image.naturalHeight) {
      needCompress = true;
      ratio = image.naturalHeight / maxH;
      maxW = image.naturalWidth / ratio;
    }
    if (!needCompress) {
      maxW = image.naturalWidth;
      maxH = image.naturalHeight;
    }
    const canvas = document.createElement("canvas");
    canvas.setAttribute("id", "__compress__");
    canvas.width = maxW;
    canvas.height = maxH;
    canvas.style.visibility = "hidden";
    document.body.append(canvas);
    // canvas画布
    const ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, maxW, maxH);
    ctx.drawImage(image, 0, 0, maxW, maxH); // 渲染图片
    const compressImage = canvas.toDataURL("image/jpeg", 0.9); // 压缩图片
    cb(compressImage);
    const _image = new Image();
    _image.src = compressImage;
    document.body.appendChild(_image);
    canvas.remove(); // 移除 canvas
  });
  image.src = base64Image; // 将图片设置到 image 的 src 属性中
  document.body.appendChild(image);
}
// 上传给服务端
function uploadImage(compressImage) {
  console.log("upload image to server...", compressImage);
}

const upload = document.getElementById("upload");
upload.addEventListener("change", function (e) {
  const file = e.target.files[0];
  console.log(file);
  if (!file) {
    return;
  }
  const { type: fileType, size: fileSize } = file;
  // 图片类型检查
  if (!ACCEPT.includes(fileType)) {
    alert("不支持上传该格式文件！");
    upload.value = "";
    return;
  }
  // 图片大小检查
  if (fileSize > MAXSIZE) {
    alert("文件超出" + MAXSIZE_STR + "！");
    upload.value = "";
    return;
  }
  // 压缩文件
  convertImageToBase64(file, (base64Image) =>
    compress(base64Image, uploadImage)
  );
});