uniapp、小程序canvas相关

• 1、圆形or圆形头像

//示例
const ctx = uni.createCanvasContext('myCanvas'); //canvas
const round = uni.upx2px(72) / 2; // 半径
const x = uni.upx2px(92); //目标x轴位置
const y = uni.upx2px(236); //目标y轴位置

//if 图片是不是静态资源
async =>
const imgSrc = 'https://xxxxxxxxxx';
const imgRes = await uni.getImageInfo({
	src: imgSrc
});
const url = await imgRes?.path;

//else
const imgSrc = '项目静态文件/xxx.png';

drawRound(ctx, round, x, y, url); //调用

const drawRound = (ctx, round, x, y, img) => {
	ctx.save();
	ctx.beginPath();
	let r = round;
	let d = 2 * r;
	let cx = x + r;
	let cy = y + r;
	ctx.arc(cx, cy, r, 0, 2 * Math.PI);
	ctx.clip();
	ctx.drawImage(img, x, y, d, d);
	ctx.restore();
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

• 2、填充背景

const ctx = uni.createCanvasContext('myCanvas'); //canvas
width, height => canvas的width,height
const createCanvasbj = (ctx, width, height) => {
	ctx.beginPath();
	ctx.rect(0, 0, width, height);
	ctx.setFillStyle('#FAFAFA');
	ctx.fill();
};
1
2
3
4
5
6
7
8

• 3、文字

ctx.setFillStyle('#646978');
ctx.setFontSize(20);
ctx.fillText(‘123123’, x, y);
1
2
3

*4、阴影

const createShadow = () => {
	ctx.beginPath();
	ctx.shadowOffsetX = 0;
	ctx.shadowOffsetY = 5;
	ctx.shadowColor = '#D4D4D4';
	ctx.shadowBlur = 10;
	ctx.rect(x, y, Width, Height);
	ctx.setFillStyle('#FFFFFF');
	ctx.fill();
};
1
2
3
4
5
6
7
8
9
10

*5、圆角矩形

const createRoundedrectangle = ( ctx, tagLeft, tagWidth, tagTop, tagHeight, radius) => {
	//tagLeft >= x
	//tagTop >= y
	//tagHeight => width
	//radius => 圆角
	
	ctx.beginPath();
	ctx.arc(tagLeft + tagWidth - radius, tagTop + tagHeight - radius, radius, 0, Math.PI * 0.5);
	ctx.lineTo(tagLeft + radius, tagTop + tagHeight);
	ctx.arc(tagLeft + radius, tagTop + tagHeight - radius, radius, Math.PI * 0.5, Math.PI);
	ctx.lineTo(tagLeft, tagTop + radius);
	ctx.arc(tagLeft + radius, tagTop + radius, radius, Math.PI, Math.PI * 1.5);
	ctx.lineTo(tagLeft + tagWidth - radius, tagTop);
	ctx.arc(tagLeft + tagWidth - radius, tagTop + radius, radius, Math.PI * 1.5, Math.PI * 2);
	ctx.lineTo(tagLeft + tagWidth, tagTop + tagHeight - radius);
	ctx.closePath();
	ctx.setStrokeStyle('#E60012');
	ctx.setFillStyle('#E60012');
	ctx.fill();
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20