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();
};
相关推荐
春哥的研究所2 小时前
AI人工智能名片小程序源码系统,名片小程序+分销商城+AI客服,包含完整搭建教程
人工智能·微信小程序·小程序
paopaokaka_luck2 小时前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序
贝格前端工场4 小时前
小程序订阅消息设计:用户触达与隐私保护的平衡法则
大数据·小程序
weixin_lynhgworld4 小时前
盲盒一番赏小程序:用科技重新定义“未知的快乐”
科技·小程序
Bruce_Json4 小时前
微信小程序ts+sassjlin-ui
微信小程序·小程序·sass
说私域8 小时前
淘宝直播与开源链动2+1模式AI智能名片S2B2C商城小程序的融合发展研究
人工智能·小程序·开源
说私域11 小时前
互联网生态下赢家群体的崛起与“开源AI智能名片链动2+1模式S2B2C商城小程序“的赋能效应
人工智能·小程序·开源
Aurora_NeAr17 小时前
Apache Iceberg数据湖基础
apache
The_era_achievs_hero17 小时前
微信小程序71~80
微信小程序·小程序
米粒宝的爸爸18 小时前
uniapp在app端,在导航栏设置自定义按钮
uni-app