如何修改HTML Canvas笔触颜色？SignaturePad签名颜色适配咨询

这里有三种实用方案，按需选择：

方案一：保存前临时切换样式重绘 #

核心思路是在保存签名时，临时将签名板切换为白底黑笔，重新绘制签名后再获取保存数据，最后恢复原显示样式。

代码示例 #

初始化签名板：

const canvas = document.getElementById('signature-pad');
const signaturePad = new SignaturePad(canvas, {
  backgroundColor: 'rgb(0, 0, 0)', // 显示用黑底
  penColor: 'rgb(255, 255, 255)'   // 显示用白笔
});

保存函数：

function saveSignature() {
  // 先备份当前签名的原始数据
  const originalSignature = signaturePad.toData();

  // 临时切换为白底黑笔，重绘签名
  signaturePad.clear();
  signaturePad.backgroundColor = 'rgb(255, 255, 255)';
  signaturePad.penColor = 'rgb(0, 0, 0)';
  signaturePad.fromData(originalSignature);

  // 获取黑笔白底的图片数据，用于存入数据库
  const saveData = signaturePad.toDataURL();
  // 这里替换成你的数据库存储逻辑，比如调用后端接口

  // 恢复原显示样式和签名
  signaturePad.clear();
  signaturePad.backgroundColor = 'rgb(0, 0, 0)';
  signaturePad.penColor = 'rgb(255, 255, 255)';
  signaturePad.fromData(originalSignature);
}

方案二：双画布同步绘制 #

用两个画布，一个负责前端显示（黑底白笔），一个隐藏用于保存（白底黑笔），绘制时同步两个画布的内容，保存时直接取隐藏画布的数据。

代码示例 #

HTML部分：

<!-- 显示用画布 -->
<canvas id="display-pad" style="background: #000;"></canvas>
<!-- 隐藏的保存用画布 -->
<canvas id="save-pad" style="display: none;"></canvas>

JavaScript部分：

const displayCanvas = document.getElementById('display-pad');
const saveCanvas = document.getElementById('save-pad');

// 初始化显示签名板
const displayPad = new SignaturePad(displayCanvas, {
  backgroundColor: 'rgb(0, 0, 0)',
  penColor: 'rgb(255, 255, 255)'
});

// 初始化保存签名板
const savePad = new SignaturePad(saveCanvas, {
  backgroundColor: 'rgb(255, 255, 255)',
  penColor: 'rgb(0, 0, 0)'
});

// 同步两个画布的绘制动作
displayPad.on('beginStroke', syncSignatures);
displayPad.on('endStroke', syncSignatures);

function syncSignatures() {
  const signatureData = displayPad.toData();
  savePad.fromData(signatureData);
}

// 保存时直接取隐藏画布的数据
function saveSignature() {
  const saveData = savePad.toDataURL();
  // 执行数据库存储逻辑
}

方案三：Canvas像素颜色反转 #

通过Canvas API反转显示画布的像素颜色，生成黑笔白底的图片后再保存，不修改原签名板的配置。

代码示例 #

// 反转Canvas颜色的工具函数
function invertCanvas(canvas) {
  const ctx = canvas.getContext('2d');
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const pixels = imageData.data;

  // 遍历像素，反转RGB通道（保留透明度）
  for (let i = 0; i < pixels.length; i += 4) {
    pixels[i] = 255 - pixels[i];     // 红色通道
    pixels[i + 1] = 255 - pixels[i + 1]; // 绿色通道
    pixels[i + 2] = 255 - pixels[i + 2]; // 蓝色通道
  }

  ctx.putImageData(imageData, 0, 0);
  return canvas;
}

// 保存函数
function saveSignature() {
  // 创建临时画布，避免修改原显示画布
  const tempCanvas = document.createElement('canvas');
  tempCanvas.width = signaturePad.canvas.width;
  tempCanvas.height = signaturePad.canvas.height;
  const tempCtx = tempCanvas.getContext('2d');
  tempCtx.drawImage(signaturePad.canvas, 0, 0);

  // 反转颜色，生成黑笔白底的图片
  invertCanvas(tempCanvas);
  const saveData = tempCanvas.toDataURL();

  // 执行数据库存储逻辑
}

内容的提问来源于stack exchange，提问作者Francois-xavier Savoie