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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/150916.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

实力认证|易知微上榜中国信息通信研究院数字孪生城市产业图谱!

近期,中国通信院就数字孪生技术在城市层面的广泛应用,根据数字孪生产业框架,结合产业发展动态和企业综合实力评估,选取了核心产业、关联产业和辐射产业等各领域业务代表性较强的企业(机构),形成…

Flink(六)【DataFrame 转换算子(下)】

前言 今天学习剩下的转换算子:分区、分流、合流。 每天出来自学是一件孤独又充实的事情,希望多年以后回望自己的大学生活,不会因为自己的懒惰与懈怠而悔恨。 回答之所以起到了作用,原因是他们自己很努力。 …

FPGA系列:1、FPGA/verilog源代码保护:基于Quartus13.1平台保护verilog源码发给第三方但不泄露源码

catlog 需求具体步骤工程描述去掉相关调试文件切换顶层模块并导出相应模块为网表文件切换回原顶层模块并添加相应保护模块的qxp文件再次编译工程 参考: 需求 有时需要将源码交付给第三方,但是源码中部分模块涉及到的核心代码无法暴漏给第三方。因此&…

2023年【高处安装、维护、拆除】模拟考试题及高处安装、维护、拆除模拟考试题库

题库来源:安全生产模拟考试一点通公众号小程序 2023年【高处安装、维护、拆除】模拟考试题及高处安装、维护、拆除模拟考试题库,包含高处安装、维护、拆除模拟考试题答案和解析及高处安装、维护、拆除模拟考试题库练习。安全生产模拟考试一点通结合国家…

C语言之qsort()函数的模拟实现

C语言之qsort()函数的模拟实现 文章目录 C语言之qsort()函数的模拟实现1. 简介2. 冒泡排序3. 对冒泡排序进行改造4. 改造部分4.1 保留部分的冒泡排序4.2 比较部分4.3 交换部分 5. bubble_sort2完整代码6. 使用bubble_sort2来排序整型数组7. 使用bubble_sort2来排序结构体数组7.…

全网最全Django面试题整理(一)

Django 中的 MTV 是什么意思? 在Django中,MTV指的是“Model-Template-View”,而不是常见的MVC(Model-View-Controller)架构。Django的设计理念是基于MTV的 Model(模型) 模型代表数据存取层&am…

golang学习笔记——接口interfaces

文章目录 Go 语言接口例子空接口空接口的定义空接口的应用空接口作为函数的参数空接口作为map的值 类型断言接口值 类型断言例子001类型断言例子002类型断言例子003巩固练习 Go 语言接口 接口(interface)定义了一个对象的行为规范,只定义规范…

基于java web个人财务管理系统

末尾获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端:采用JSP技术开发 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件:IDEA / Eclipse 是否Maven项目&#x…

【开题报告】疫苗在线预约小程序的设计与实现

1.选题背景 (1)新冠疫情下的疫苗接种挑战: 针对当前全球范围内的新冠疫情,疫苗接种成为控制疫情蔓延的重要手段。然而,大规模疫苗接种也带来了接种排队、人群聚集等管理难题,为了更好地组织和管理疫苗接种…

stable-diffusion-webui之webui.py

主要就是webui的启动这块,需要初始化的地方,东西还是挺多的。

8年资深测试,自动化测试常见问题总结,惊险避坑...

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 1、自动化测试简介…

2023.11.18 Hadoop之 YARN

1.简介 Apache Hadoop YARN (Yet Another Resource Negotiator,另一种资源协调者)是一种新的 Hadoop 资源管理器,它是一个通用资源管理系统和调度平台,可为上层应用提供统一的资源管理和调度。支持多个数据处理框架&…

《轻购优品》新零售玩法:消费积分认购+众筹新玩法

《轻购优品》新零售玩法:消费积分认购众筹新玩法 引言:2023年开年已来,政府的工作报告提出“把恢复和扩大消费摆在优先位置”,并且把2023年定位为“消费提振年”,以“全年乐享全年盛惠”为主题多地政府共同发力&#x…

Altium Designer 相同模块的布局布线复用-AD

1、利用交互式布线,将两个相同模块的元器件在PCB上分块显示。 在原理图中,框选某一模块电路、按快捷键 TS 切换到PCB编辑界面、工具>器件摆放>在矩形区域内排列(可将模块中的器件都集中放置到矩形框内)。2、为模块电路添加 …

YOLOv8改进 | EIoU、SIoU、WIoU、DIoU、FocusIoU等二十余种损失函数

一、本文介绍 这篇文章介绍了YOLOv8的重大改进,特别是在损失函数方面的创新。它不仅包括了多种IoU损失函数的改进和变体,如SIoU、WIoU、GIoU、DIoU、EIOU、CIoU,还融合了“Focus”思想,创造了一系列新的损失函数。这些组合形式的…

关于Hbase的一些问题

HBase 1. RowKey如何设计,设计不好会产生什么后果 唯一原则:在设计上要保持RowKey的唯一性。 因为HBase中的数据是以KV的格式来存储的,所以如果向同一张表中插入RowKey相同的数据,旧的数据会被覆盖掉。 长度原则:建…

Java方法中不使用的对象应该手动赋值为NULL吗?

在java方法中,不使用的对象是否应该手动赋值为null?我们先来通过一个示例看一下。 垃圾回收示例一 public class GuoGuoTest {public static void main(String[] args) {byte[] placeholder new byte[64 * 1024 * 1024];System.gc();} } 上面代码向内…

vue3 tsx 项目中使用 Antv/G2 实现多线折线图

Antv/G2 文档 Antv/G2 双折线图 安装 antV-G2 通过 npm 安装 项目中安装 antv/g2 依赖库&#xff1a; npm install antv/g2 --save安装成功&#xff1a; 浏览器引入 可以将脚本下载到本地&#xff0c;也可以直接引入在线资源。 引入在线资源 <!-- 引入在线资源&…

java springboot在测试类中启动一个web环境

我们在开发过程中 可以对数据层 业务层做测试 那我们的表现层能做测试吗&#xff1f; 答案自然是可以的 但是 前提 我们要有一个web环境 我们现在 测试类运行 明显是个很普通的java程序 还是这个 SpringBootTest 它有一个 webEnvironment 我们可以先这样写 package com.examp…

城市生命线丨市政综合管廊监测系统的效果

市政综合管廊&#xff0c;又被称为城市生命线&#xff0c;是我们在地下建造的一个智慧而高效的空间。它把市政、电力、通讯、燃气、给排水等各种管线集于一体&#xff0c;解决了城市中反复开挖路面、架空线网密集、管线事故频发等问题&#xff0c;为城市运行提供了重要的基础设…