uni-app canvas绘制图片和文字_uniapp在图片上文字

前一段时间我们老师让我写一个关于画布功能的一个海报，这个海报是由图片和文字组成，刚开始我是不太了解这个画布的，后来各种百度…

首先需要在结构层设置的画布宽高以及画布id

	<view class="indeximg">
		<canvas style="width: 100%;height: 450px; " canvas-id="firstCanvas"></canvas>
	</view>
1
2
3

绘制远程图片

canvas无法直接读取远程图片，所以需要使用uni-app官网api

uni.getImageInfo({
				src: "http://game.gtimg.cn/images/yxzj/act/a20160510story/relavance/heroes/hero48.jpg",
				success(res) {
					console.log(res.path) 
					var ctx = uni.createCanvasContext("firstCanvas") // 使用画布创建上下文 图片
					ctx.drawImage(res.path, x, y, 100, 100)// 设置图片坐标及大小，括号里面的分别是（图片路径，x坐标，y坐标，width，height）
					ctx.save();//保存
					ctx.draw()//绘制
				}
			})
1
2
3
4
5
6
7
8
9
10

绘制文字

ctx.fillText("内容",240,40);//文字内容、x坐标，y坐标
ctx.font = 'normal 20px STXingkai'; // 字体
ctx.setFontSize(10) //设置字体大小，默认10
ctx.setFillStyle('#DD524D') //文字颜色：默认黑色
ctx.fillText("width:" + ctx.measureText(that.sent[0]).width, 50, 50) //显示文字宽度
1
2
3
4
5