h5 canvas html 合成,图片合成以及canvas的应用

使用 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 实现图片合成通常需要以下三个步骤：

根据设计稿量出页面中个元素的位置

计算文本相对于图片中元素的距离，设置字体大小和自身样式

调用 API 绘制图片

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

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

ctx.font = "48px serif"

ctx.fillStyle = "#dfe0e7"

ctx.fillText("Hello world", 10, 50)

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

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