使用 canvas 在前端实现图片合成

基本API

// 绘制图片常用 API
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

ctx.drawImage(imgage: HTMLCanvasElement | HTMLImageElement | HTMLVideoElement | ImageBitmap, distX: number, distY: number)

// 绘制文本常用API
const ctx = document.getElementById('canvas').getContext('2d')
ctx.font = "48px serif"
ctx.fillText("Hello world", 10, 50)

各个参数的用途已在代码中标出。image是将要渲染的图片，distX 和 distY 分别代表着图片与原点 x 轴和 y 轴方向上的距离。

先来一个最简单的例子。

  
  
  Canvas DrawImage
    canvas {
      border: 1px black dashed;
    }
  

效果如下图:

绘制步骤

使用 Canvas 实现图片合成通常需要以下三个步骤：

1. 根据设计稿量出页面中个元素的位置
2. 计算文本相对于图片中元素的距离，设置字体大小和自身样式
3. 调用 API 绘制图片

针对第一点，以实际项目为例，先对要合成页的页面元素进行拆分，随后拉取参考线，对各个元素的位置进行测量并记录对应位置

针对第二点，先设置要渲染文字的字号，以及样式。

ctx.font = "48px serif"
ctx.fillStyle = "#dfe0e7"
ctx.fillText("Hello world", 10, 50)

其中的10，和50分别代表距离 x 轴和 y 轴的距离。

第三点，调用 API 绘制图片。