uniapp、小程序canvas相关

  • 1、圆形or圆形头像
javascript 复制代码
//示例
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、填充背景
javascript 复制代码
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、文字
javascript 复制代码
ctx.setFillStyle('#646978');
ctx.setFontSize(20);
ctx.fillText('123123', x, y);

*4、阴影

javascript 复制代码
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、圆角矩形

javascript 复制代码
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();
};
相关推荐
说私域3 小时前
互联网生态下赢家群体的崛起与“开源AI智能名片链动2+1模式S2B2C商城小程序“的赋能效应
人工智能·小程序·开源
Aurora_NeAr10 小时前
Apache Iceberg数据湖基础
apache
The_era_achievs_hero10 小时前
微信小程序71~80
微信小程序·小程序
米粒宝的爸爸10 小时前
uniapp在app端,在导航栏设置自定义按钮
uni-app
源图客11 小时前
Apache Nutch介绍与部署编译
apache·nutch
FreeBuf_11 小时前
Apache组件遭大规模攻击:Tomcat与Camel高危RCE漏洞引发数千次利用尝试
java·tomcat·apache
dssxyz11 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
xw511 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !11 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
澄江静如练_15 小时前
微信小程序发体验版
微信小程序·小程序