绘制圆弧，x、y为绘制圆弧的圆心；radius为半径；start为起始弧度（0表示x轴即水平向右）；end为结束弧度（顺时针时，是按起始弧度转end-start弧度，即相差2π时绘制的是圆，逆时针旋转时，是从start弧度逆时针转到end弧度，且start、end弧度是按照顺时针的弧度，大于2π时%2π）；anticlockwise为是否逆时针转，false为顺时针旋转；

注意使用前需要beginPath。

设置绘制属性（线条属性、虚线等）

ctx.globalAlpha = 0.1

设置线条的透明度，取值为0～1。

ctx.lineWidth = 1

设置线条的宽度，默认为1。

ctx.lineCap = ’round‘

设置线段末端结束方式，默认butt为方形结束，round为半圆型结束。

ctx.lineJoin = 'round'

设置线段连接处的样式，默认为miter为正常线性连接，round为连接处圆形，bevel为连接处底部为平的。

ctx.setLineDash([4,20,...,])

设置虚线，接受一个数组，数组第一位为实线长度，第二位为虚线长度即空白的长度，第三位为实线长度，以此类推，然后用数组的内容循环设置线段的虚实。

ctx.lineDashOffset = 4

设置起始的偏移量，如果设置为4，则上面从虚线即空白长度20开始。

绘制文字

ctx.font='30px 宋体'

设置字体大小和字体样式。

ctx.fillText(str,x,y)

绘制文字内容，x、y为绘制的起始坐标。

ctx.textAlign = 'center'

设置文本水平方向对齐方式，参数有start（默认）、end（文字都在起始坐标x轴左边）、center。

注意center表示基于起始坐标x轴居中，此时想让文本在整个canvas居中，设置fillText的x值为canvas的宽度一半即可。

颜色渐变

let linear = ctx.createLinearGradient(100,100,200,200)

设置颜色渐变的起始坐标和终点坐标，颜色会从起始坐标向总店坐标渐变

linear.addColorStop(0,'red')

设置起始坐标到终点坐标上的颜色，第一个参数为当前渐变的位置（0～1之间的小数，0表示起点，0.5表示中点，1表示终点，可设置多段，从0开始向1过程中设置的颜色渐变），第二个参数为颜色。

注意最后需要将颜色设置上去即ctx.fillStyle = linear。

设置阴影

ctx.shadowOffsetX|Y = 1

X为设置阴影向右偏离距离，Y为向下的偏离距离，负为方向。

ctx.shadowBlur = 20

设置模糊状态

ctx. shadowColor = 'red'

设置阴影颜色。

渲染图片

ctx.drawImage(img,x0,y0,w0,y0,x1,y1,w1,h1)

img为图片对象，

接受3个参数时(img,x,y):x、y为图片加载位置，即渲染图片的左上角坐标起点。

注意由于图片渲染是异步的，要在onload事件中渲染

let img = new Image();
img.src = '图片地址'
img.onload = function() {
    ctx.drawImage(img,100,100)
}

接受5个参数时（img,x,y,w,h)： x、y为图片加载位置，即渲染图片的左上角坐标起点。w为宽度，h为高度。

接受9个参数时(img,x0,y0,w0,y0,x1,y1,w1,h1)：x0、y0、w0、h0表示从图片x0、y0位置裁剪w0宽、h0高的图片；x1、y1为图片加载位置，即渲染图片的左上角坐标起点。w1、h1为图片最后的宽、高。

变形偏移

canvas可以进行变形偏移，变形的是整个画布的渲染区域。

注意canvas的每次绘制都是在上次的基础上，通过save、restore可以重新定义绘制的状态。

ctx.save()

保存画布的颜色、透明度等属性（strokeStyle、fillStyle、gloabalAlpha、lineWidth、lineCap、lineJoin、miterLimit、lineDashOffset、shadowOffsetX｜Y、shadowBlur、shadowColor、font、textBaseline、direction、translate等），将每次所有的属性放入一个栈中。

ctx.restore()

恢复canvas状态，canvas状态是当前画面应用的所有样式和变形的一个快照。从save存放的栈中取出一次状态.

ctx.translate(x,y)

绘制内容左上角起点坐标偏移到x、y，水平向右和竖直向下为正向。

ctx.rotate(deg)

图案顺时针旋转deg弧度，初始圆心为图片的左上角顶点（可以通过translate改变圆心，x、y负数时相当于圆心在水平和竖直方向上正向移动）。

ctx.scale(x,y)

图案在x、y轴方向的缩放倍数，默认为1，大于1代表放大，小于1代表缩小。

ctx.transform(a,b,c,d,e,f)

是上述属性的综合写法，a、d表示水平和竖直防线的；b、c为竖直和水平防线的倾斜偏移；e、f为水平和竖直方向的移动。

canvas.toDataURL(type,encoderOptions)

将指定canvas内容转换为base64编码的图片（图片转换为base64位编码后，图片会跟随代码（html、css、js）一起请求加载，不会单独进行请求加载），canvas为html中canvas节点而不是画布上下文。type为指定的格式（image/png、image/jpeg、image/webp等，默认为image/png）；encoderOptions为用于设置转换为base64编码后图片的质量，取值范围为0-1，超出范围用默认值0.92代替。

html节点转canvas转base64图片下载示例（html2canvas）

注意html节点中如果有img标签，避免图片渲染不出来，需要设置属性crossOrigin="anonymous"。

Allowing cross-origin use of images and canvas - HTML: HyperText Markup Language | MDN

html标签中crossOrigin、integrity属性详解_YF-SOD的博客-CSDN博客

import html2canvas from "html2canvas";
const downloadFile = (content, fileName) => {
  //下载base64图片
  let base64ToBlob = function (code) {
    let parts = code.split(";base64,");
    let contentType = parts[0].split(":")[1];
    let raw = window.atob(parts[1]); //base64解码
    let rawLength = raw.length;
    let uInt8Array = new Uint8Array(rawLength);
    for (let i = 0; i < rawLength; ++i) {
      uInt8Array[i] = raw.charCodeAt(i); //将每一位转换为unicode编码
    }
    return new Blob([uInt8Array], {
      //生成二进制流
      type: contentType,
    });
  };
  let aLink = document.createElement("a");
  let blob = base64ToBlob(content); //new Blob([content]);
  let evt = document.createEvent("htmlEvents");
  evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
  aLink.download = fileName;
  aLink.href = URL.createObjectURL(blob);
  aLink.click();
};
const DPR = () => {
  if (window.devicePixelRatio && window.devicePixelRatio > 1) {
    return window.devicePixelRatio;
  } else {
    return 1;
  }
};
const downloadDomPng = async () => {
  const dom = document.getElementById("convertCanvasDom"); // 获取想要转换的 DOM 节点
  const box = window.getComputedStyle(dom);
  const width = box.width; // 根据DOM节点设置宽高
  const height = box.height;
  const scaleBy = DPR(); // 获取像素比-防止模糊
  const canvas = document.createElement("canvas"); // 创建自定义 canvas 元素
  canvas.width = width * scaleBy; // 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比
  canvas.height = height * scaleBy;
  // 设定 canvas css宽高为 DOM 节点宽高
  canvas.style.width = `${width}px`;
  canvas.style.height = `${height}px`;
  return await html2canvas(dom, {
    canvas,
    proxy: "https://baidu.com", //设置和线上相同的域名地址
    useCORS: true,//true加载跨域图像的配置
  }).then((canvas) => {
    downloadFile(canvas.toDataURL("image/png"), "filename");
  });
};

示例使用方法解析

URL.createObjectURL、URL.revokeObjectURL、Uint8Array、Blob使用详解_YF-SOD的博客-CSDN博客

canvas文档

Canvas - Web API 接口参考 | MDN