canvas 一键转黑白

按照以下步骤将 Canvas 转换为黑白模式：

1. 使用 JavaScript 创建一个新的 Canvas 元素，它的宽度和高度与原始 Canvas 元素相同。
2. 获取原始 Canvas 元素的像素数据。
3. 将每个像素的 Red、Green 和 Blue 值加权平均，形成一个新的灰度值。
4. 对于每个像素，将 Red、Green 和 Blue 值设置为相同的灰度值。
5. 将新的像素数据放回新的 Canvas 元素。

以下是实现这个过程的 JavaScript 代码：

// 获取原始 Canvas 元素
var canvas = document.getElementById('myCanvas');
// 获取 2D 上下文对象
var ctx = canvas.getContext('2d');
// 获取原始 Canvas 元素的像素数据
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

// 使用 JavaScript 创建一个新的 Canvas 元素，它的宽度和高度与原始 Canvas 元素相同。
var newCanvas = document.createElement('canvas');
newCanvas.width = canvas.width;
newCanvas.height = canvas.height;
var newCtx = newCanvas.getContext('2d');

// 遍历像素数据，将每个像素转换为黑白
for (var i = 0; i < imageData.data.length; i += 4) {
  // 获取像素的 RGB 值
  var r = imageData.data[i];
  var g = imageData.data[i + 1];
  var b = imageData.data[i + 2];
  // 计算灰度值
  var gray = 0.299 * r + 0.587 * g + 0.114 * b;
  // 将 RGB 值设置为灰度值
  imageData.data[i] = gray;
  imageData.data[i + 1] = gray;
  imageData.data[i + 2] = gray;
}

// 将新的像素数据放回新的 Canvas 元素
newCtx.putImageData(imageData, 0, 0);

// 将新的 Canvas 元素插入到页面中
document.body.appendChild(newCanvas);

通过上述代码，将原始 Canvas 转换为黑白模式，并在页面中显示新的 Canvas 元素。