如何利用 Canvas API 弯曲拉伸图片？

利用 Canvas API 弯曲拉伸图片

如何利用 HTML 和 CSS 呈现上面所示的效果？

HTML 和 CSS 实现

此效果不易用纯粹的 HTML 和 CSS 实现。CSS3 中的 transform 属性虽可用于旋转元素，但无法实现丝滑的弯曲效果，且无法处理中间行。

Canvas API 实现

使用 Canvas API 中处理图像像素的方法来控制图片像素，可以实现弯曲拉伸效果。以下代码片段演示了基本概念：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const image = document.getElementById('image');

// 加载图像并将其绘制到画布
ctx.drawImage(image, 0, 0);

// 获取图像数据
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

// 修改图像像素颜色以沿着曲线弯曲
for (let i = 0; i < imageData.data.length; i += 4) {
  // 计算像素的偏移量，产生弯曲效果
  const offset = Math.sin(i / 100) * 10;
  
  // 修改像素的颜色
  imageData.data[i] += offset;
  imageData.data[i + 1] += offset;
  imageData.data[i + 2] += offset;
}

// 将修改后的图像数据放回画布
ctx.putImageData(imageData, 0, 0);