巧用Canvas图像填充，释放图形多样性之美！

canvas图像填充不仅限于颜色填充，还可以通过定义图案来填充形状。与渐变填充类似，图案填充也是相对于当前坐标系绘制图案的。你可以使用createPattern()函数来定义图案，该函数的第二个参数用于设置图像重复方向。

function drawPattern(context, image) {
  const pattern = context.createPattern(image, "repeat");
  context.fillStyle = pattern;
  context.fillRect(0, 0, 100, 100);
}

在上面的代码中，我们定义了一个名为“repeat”的图案，它将图像重复填充到整个形状中。你可以使用以下重复方向值来创建不同的图案效果：

• "repeat"：图像在水平和垂直方向上重复
• "repeat-x"：图像仅在水平方向上重复
• "repeat-y"：图像仅在垂直方向上重复
• "no-repeat"：图像不重复，只填充一次

通过使用图像填充，你可以将丰富多彩的图案融入图形设计中，赋予它们别具一格的视觉美感。你可以使用不同的图案和重复方向来创建各种各样的视觉效果，让你的图形设计更加生动有趣。

除了图像填充，canvas还支持渐变填充，可以获取平滑细腻的视觉效果。你可以使用createLinearGradient()或createRadialGradient()函数来创建渐变对象，然后将其应用到填充样式中。

function drawGradient(context) {
  const gradient = context.createLinearGradient(0, 0, 100, 100);
  gradient.addColorStop(0, "red");
  gradient.addColorStop(1, "blue");
  context.fillStyle = gradient;
  context.fillRect(0, 0, 100, 100);
}

在上面的代码中，我们创建了一个线性渐变对象，它从红色过渡到蓝色。你也可以使用createRadialGradient()函数来创建径向渐变，它从中心向外辐射出颜色。

通过使用渐变填充，你可以创建出更加平滑细腻的视觉效果，让你的图形设计更加富有层次感和美感。

canvas内置方法还可以获取像素信息，以便进行图像处理或信息提取。你可以使用getImageData()函数来获取图像的像素数据，然后使用putImageData()函数来修改像素数据并将其重新应用到图像中。

function getImageData(context) {
  const imageData = context.getImageData(0, 0, 100, 100);
  const data = imageData.data;
  for (let i = 0; i < data.length; i += 4) {
    data[i] = 255 - data[i];
    data[i + 1] = 255 - data[i + 1];
    data[i + 2] = 255 - data[i + 2];
  }
  context.putImageData(imageData, 0, 0);
}

在上面的代码中，我们使用getImageData()函数获取图像的像素数据，然后使用putImageData()函数将修改后的像素数据重新应用到图像中。这将使图像变为负片效果。

通过使用canvas内置方法，你可以轻松实现各种图像处理和信息提取操作，让你的图形设计更加灵活多变。