小程序问题

1.获取节点
wx.createSelectorQuery()
wx.createSelectorQuery().in(this) //组件中加in(this),不然获取不到

2.使用实例

wx.createSelectorQuery().in(this).select('#share').fields({node: true,size: true}).exec(async (res) => {const canvas = res[0].node;// Canvas 绘制上下文const ctx = canvas.getContext('2d');//  let dpr = this.data.dpr//画布大小根据屏幕分辨率进行缩放,防止模糊const renderWidth = res[0].widthconst renderHeight = res[0].height// 初始化画布大熊啊//  const dpr = wx.getSystemInfoSync().pixelRatiocanvas.width = renderWidth*ratiocanvas.height = renderHeight*ratioctx.scale(ratio, ratio)//画布背景色ctx.fillStyle="#ffffff"ctx.fillRect(0,0,canvas.width, canvas.height)//画图片const image = canvas.createImage()image.crossOrigin = "Anonymous" // 亚跨域使用image.src = imageCoverimage.onload = ()=>{//计算裁剪图片// const imageWidth = image.width// const imageHeight = image.height// const cropRatio = 3/4// const cropWidth = imageWidth * cropRatio// const cropHeight = imageHeight// 计算裁剪的起始位置,这里以居中为例// const startX = (imageWidth - cropWidth) / 2// const startY = (imageHeight - cropHeight) / 2// ctx.drawImage(image, startX, startY, cropWidth, cropHeight, 0, 0, 300, 400)ctx.drawImage(image, 0, 0, 300, 400);}})

填充文字样式

 ctx.font= '600 12px PingFang TC'ctx.fillStyle = '#ffffff'ctx.fillText('你好',231,362)

填充文字边框样式

 ctx.font= '600 12px PingFang TC'ctx.fillStyle = '#ffffff'ctx.strokeStyle = "#000000";ctx.fillText('你好',231,362)ctx.strokeText('你好',231,362);

计算文字宽度
var metrics = c

ctx.measureText(testLine).width;

3.css文字描边:
-webkit-text-stroke: 1px red; 会使文字越来越瘦,占文字本身的宽度,黑色字体样式会减少在这里插入图片描述

可以使用
data里面设置 textValue: ‘愉快’
在这里插入图片描述

<view class="title-greet" data-color="#0C20E9" data-attr-greet="{{textValue}}">{{textValue}}</view>
.title-greet{-webkit-text-stroke-width: 4px;  -webkit-text-stroke-color: #fff; -webkit-text-stroke: 4px #fff; position: relative;z-index: 1;
}
.title-greet:after {position: absolute;z-index: 2;left: 0;right: 0;top: 0;-webkit-text-stroke-width: 0px;content: attr(data-attr-greet);color: attr(data-color);
}

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

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

相关文章

通过window.postMessage,跨域传递数据

第一个项目的代码&#xff0c;项目地址 http://localhost:5173/ 第二个项目的代码&#xff0c;项目地址 http://localhost:5174/ 点击按钮会打开第二个项目的页面 第二个项目的页面

Rust代码优化的九大技巧

一.使用 Cargo 内置的性能分析工具 描述&#xff1a;Cargo 是 Rust 的包管理器&#xff0c;带有内置工具来分析代码性能&#xff0c;以识别性能瓶颈。 解释&#xff1a; 发布模式&#xff1a;在发布模式下编译启用优化&#xff0c;可以显著提高性能。 cargo build --release基…

StarRocks下载使用说明和基础操作

简介 StarRocks 是一款高性能分析型数据仓库&#xff0c;使用向量化、MPP 架构、CBO、智能物化视图、可实时更新的列式存储引擎等技术实现多维、实时、高并发的数据分析。StarRocks 既支持从各类实时和离线的数据源高效导入数据&#xff0c;也支持直接分析数据湖上各种格式的数…

C++:组合和继承的区别

组合介绍以及与继承对比 什么是组合 (1)composition&#xff0c;组合&#xff0c;就是在一个class内使用其他多个class的对象作为成员 (2)用class tree做案例讲解 (3)组合也是一种代码复用方法&#xff0c;本质也是结构体包含 #include <iostream> #include <vector…

前端-Cookie篇

文章目录 一、由来什么是Cookie&#xff1f;特点Cookie的类型 二、原理三、Cookie生成机制客户端设置案例 四、属性五、缺陷最后分享一段自己工作中封装的一些关于cookie的公众方法✒️总结 前端Cookie是Web开发中非常重要的一部分&#xff0c;它是服务器发送到用户浏览器并保存…

Python模块ConfigParser读取应用程序的配置文件简单示例

一、模块说明&#xff1a; 系统管理员通常通过文本编辑器编辑这些配置文件&#xff0c;以设置应用程序的默认值&#xff0c;然后应用程序将读取并解析这些配置文件&#xff0c;并根据其中的内容执行对应操作。ConfigParser模块具有read()方法&#xff0c;用于读取配置文件。 …

STM32自己从零开始实操08:STM32主控原理图

由于老师使用的各引脚分门别类的单片机原理图我没有找到&#xff0c;我使用是引脚按顺序摆放的&#xff0c;不方便一个模块一个模块截图展示&#xff0c;所以这部分使用老师的原理图。 一、电源 1.1电源的介绍 1.1.1数字电源和地&#xff08;VDD和VSS&#xff09; 数字电源…

中国各省养老机构数据明细(更新至2024年)

中国养老机构是指为老年人提供集中居住、生活照顾、健康管理、文化娱乐等综合性服务的设施。这些机构包括养老院、福利院、老年公寓等多种形态&#xff0c;既有公立也有民办&#xff0c;遍布城市与农村。 一、数据介绍 数据名称&#xff1a;中国养老机构数据明细 数据范围&am…

[leetcode]minimum-cost-to-reach-destination-in-time 规定时间内到达终点的最小费用

. - 力扣&#xff08;LeetCode&#xff09; class Solution { private:// 极大值static constexpr int INFTY INT_MAX / 2;public:int minCost(int maxTime, vector<vector<int>>& edges, vector<int>& passingFees) {int n passingFees.size();ve…

LinkedList----源码分析

源码介绍 public class LinkedList<E>extends AbstractSequentialList<E>implements List<E>, Deque<E>, Cloneable, java.io.Serializable{} 添加过程中的操作&#xff1a; 当创建LinkedList类时&#xff0c;会调用其空参构造方法&#xff0c;将其参…

ipv4和ipv6的兼容性问题

ipv4和ipv6的兼容 现今大多知名网站都是同时支持ipv6和ipv4&#xff0c;这种可以分为两种情况讨论&#xff1a; 一个IPv4的网络和一个IPv6的网络通信;一个IPv6的网络和一一个IPv6的网络通信&#xff0c;但是中间需要经过一一个IPv4的网络。 先以第一种为例&#xff1a; 若一…

昇思大模型——MindFormers的使用----从零开始安装配置环境

MindSpore Transformers套件的目标是构建一个大模型训练、微调、评估、推理、部署的全流程开发套件&#xff0c;提供业内主流的Transformer类预训练模型和SOTA下游任务应用&#xff0c;涵盖丰富的并行特性。期望帮助用户轻松的实现大模型训练和创新研发。 MindSpore Transform…

Linux编程第三篇:Linux简介,开源软件简介(Linux是否安全?参考TESEC指标)

业精于勤荒于嬉&#xff0c;行成于思毁于随。 今天这篇算是Linux的正式学习&#xff0c;废话不多说&#xff0c;我们开始吧 第三篇 一、UNIX与Linux发展史1.1、UNIX发展历史和发行版本1.2、UNIX主要发行版本1.3、Linux发展历史1.4、Linux内核版本1.5、Linux主要发行版本 二、开…

渐变且描边文字

效果&#xff1a; 用 background-image&#xff1a;linear-gradient实现渐变、 text-shadow实现描边 元素同时添加&#xff1a; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(143, 180, 253, 1));-webkit-background-clip: text;background-…

Spring支持人工智能应用框架-SpringAi

简介 人工智能技术和日益成熟&#xff0c;开发企业级人工智能的应用已成为一个热门的趋势。Spring AI 是一个用于 AI 工程的应用框架&#xff0c;目的是为了简化AI应用的对接、部署、维护和扩展。 SpringAi的灵感来自LangChain和LlamaIndex&#xff0c;但是SpringAi并不是直接…

Python实现动态迷宫生成:自动生成迷宫的动画

文章目录 引言准备工作前置条件 代码实现与解析导入必要的库初始化Pygame定义迷宫生成类主循环 完整代码 引言 迷宫生成算法在游戏开发和图形学中有着广泛的应用。它不仅可以用于创建迷宫游戏&#xff0c;还可以用于生成有趣的图案。在这篇博客中&#xff0c;我们将使用Python…

基于Java的校园交友网站系统

你好&#xff0c;我是专注于计算机技术研究的学姐码农小野。如果你对校园交友网站系统的构建或者相关技术感兴趣&#xff0c;欢迎私信交流。 开发语言 Java 数据库 MySQL 技术 Java语言、SpringBoot框架、B/S结构 工具 MyEclipse、Navicat、Maven 系统展示 首页 个人…

Postman:Body类型中的x-www-from-urlencoded参数可以接受GET请求吗?

不可以 今天学习Spring Web MVC&#xff0c;在借助Postman学习 RequestMapping 注解时&#xff0c;发现Body类型中的x-www-from-urlencoded参数不支持GET请求。 按理说 RequestMapping 注解可以支持全部类型的请求&#xff0c;但为何在这里不能支持GET请求呢&#xff1f; 以下是…

Diffusion 加速系列之三 | LCM

0. 资源链接 论文: LCM&#xff1a;https://arxiv.org/abs/2310.04378 项目: https://github.com/luosiallen/latent-consistency-model 1. 背景动机 现有的高分辨率的 diffusion 模型推理存在的问题&#xff1a; Diffusion 模型推理过程包含多步去噪的流程&#xff0c;这会…

VMware虚拟机使用标准分区后对分区进行扩容

前言&#xff1a; 使用虚拟机创建系统后&#xff0c;/ 盘 想要扩容需要几步才能实现&#xff0c;下面将介绍具体流程 确定根分区磁盘以及分区号&#xff0c;和起始扇区和结束扇区 # 查看磁盘名称和分区 # 如下可看出根分区为 /dev/sda2 &#xff0c;磁盘为sda [root192 ~]# ls…