当前位置：首页 > news >正文

uniapp、小程序canvas相关

news 2025/8/26 17:23:58

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();
};

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();
};

3、文字

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

*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();
};

*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();
};