uni-app canvas绘制海报流程的一些记录

最新推荐文章于 2024-07-19 15:50:31 发布

web老猴子

最新推荐文章于 2024-07-19 15:50:31 发布

阅读量611

点赞数 1

文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/web220507/article/details/128682961

版权

本文详细记录了使用uni-app进行canvas绘制海报的流程，包括布局定义、背景图和背景绘制、本地图片及文字的绘制。通过createCanvasContext创建canvas对象，利用drawImage、fillText等API实现复杂设计效果。遵循设计稿排版，设置坐标和文字对齐方式，即可绘制出理想中的海报。此外，还提供了前端面试宝典资源。

摘要由CSDN通过智能技术生成

绘制流程

布局定义

在我们的布局里要声明canvas的定义如下，可以声明class布局样式，width和height是必须的，因为如果没有就绘制不了。

canvas-id也是必须的，我们需要通过id找到对一个你的canvas对象，来做操作

<canvas class="poster_canvas" canvas-id="mini_poster":style="{ width: canvasW + 'px', height: canvasH + 'px' }">
</canvas>

绘制背景图

所有绘制操作都要通过createCanvasContext创建好canvas对象来进行，这里this.bgShareInvite 是一个图片url，这里是获取到图片的信息，然后通过 drawImage 绘制出来参数需要绘制的坐标(x,y)和绘制的图片宽高。

let ctx = uni.createCanvasContext('mini_poster', this)
let info = await uni.getImageInfo({src: this.bgShareInvite
})
console.log('info:', info[1]);
//绘制背景图
ctx.drawImage(info[1].path, 0, 0, this.canvasW, this.canvasH)