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智能名片S2B2C商城小程序”视角下的教育用户策略研究
人工智能·小程序
2501_916007475 小时前
提升 iOS 26 系统流畅度的实战指南,多工具组合监控
android·macos·ios·小程序·uni-app·cocoa·iphone
砺能7 小时前
uniapp生成的app添加操作日志
前端·uni-app
一匹电信狗7 小时前
【MySQL】数据库表的操作
linux·运维·服务器·数据库·mysql·ubuntu·小程序
2501_9159214311 小时前
iOS 应用代上架流程,多工具组合与使用 开心上架 跨平台自动化上传指南
android·ios·小程序·uni-app·自动化·cocoa·iphone
知识分享小能手11 小时前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
雪芽蓝域zzs11 小时前
uniapp 修改android包名
android·uni-app
芒果沙冰哟11 小时前
uniapp canvas实现手写签字功能(包括重签,撤回等按钮)
uni-app
爱折腾的小码农11 小时前
uni-app 小程序开发避坑:诡异的 `module ‘...‘ is not defined` 错误与我的解决方案
uni-app
Q_Q196328847511 小时前
python+uniapp基于微信小程序的助眠小程序
spring boot·python·小程序·django·flask·uni-app·node.js