当前位置: 代码迷 >> 综合 >> uni-app小程序canvas绘制宣传图片的爬坑整理(绘制本地图片,http链接图片和https链接图片)
  详细解决方案

uni-app小程序canvas绘制宣传图片的爬坑整理(绘制本地图片,http链接图片和https链接图片)

热度:32   发布时间:2024-01-20 23:48:47.0
<template><canvas canvas-id="shareImg"></canvas>
</template>

1、canvas写入文字

const ctx = uni.createCanvasContext('shareImg');
ctx.fillText('hello,wold!', 30,20);//30X到左边的距离,20Y到顶部的距离,单位是px

2、canvas文字设置fontSize

const ctx = uni.createCanvasContext('shareImg');
ctx.setFontSize(25);//设置文字的fontSize为25px
ctx.fillText('hello,wold!', 30,20);

3、canvas设置文字颜色

const ctx = uni.createCanvasContext('shareImg');
ctx.setFillStyle('#fff');//设置文字颜色为白色
ctx.fillText('hello,wold!', 30,20);

4、canvas设置文字阴影

const ctx = uni.createCanvasContext('shareImg');
ctx.shadowOffsetX = -3; //用来设定阴影在 X轴的延伸距
ctx.shadowOffsetX = 4; //用来设定阴影在 Y轴的延伸距
ctx.shadowBlur = 2; //设定阴影的模糊程度 默认0
ctx.shadowColor = "rgba(255, 255, 255)"; //设定阴影颜色效果
ctx.font = 'normal bold 25px sans-serif';
ctx.fillText('hello,wold!', 30,20);

5、canvas设置文字居中

const ctx = uni.createCanvasContext('shareImg');
ctx.setTextAlign('center');//设置居中
ctx.fillText(&#
  相关解决方案