uniapp canvas vue3 ts实例

<template><view><canvas canvas-id='canvas-test' class="canvas-test"></canvas></view>
</template><script setup lang="ts">//封装的jsimport libs from '@/libs';//重点引入的import type { ComponentInternalInstance } from "vue";import { getCurrentInstance } from 'vue';const {proxy} = getCurrentInstance() as ComponentInternalInstance;const imgHttp = 'xxx/imgs/'onLoad(()=>{drawPoster();});const drawPoster = ()=>{const ctx = uni.createCanvasContext('canvas-test', proxy);return new Promise(async(r,j)=>{//绘制背景图await drwaBg(ctx);ctx.draw();})};const drwaBg = (ctx:any) : Promise<string>=>{return new Promise(async(r)=>{ctx.beginPath();let cWidth = uni.upx2px(750) //宽let cHeight = uni.upx2px(1362) //高const bgImgUrl = await libs.downloadFile(`${imgHttp}sell-save-bg.png`);ctx.drawImage(bgImgUrl,0,0,cWidth,cHeight);ctx.closePath();r(ctx);});};
</script><style lang="less" scoped>.canvas-test{width: 750rpx;height: 1362rpx;}
</style>

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

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

相关文章

【数学建模】 复杂网络与图论模型

文章目录 复杂网络与图论模型1. 复杂网络概念与理论1.1 复杂网络中的基本概念1.2 复杂网络中的统计指标 2. 图论算法&#xff1a;遍历&#xff0c;二分图与最小生成树2.1 图的遍历算法深度优先搜索&#xff08;DFS&#xff09;广度优先搜索&#xff08;BFS&#xff09; 2.2 二分…

Postman接口测试工具的原理及应用详解(六)

本系列文章简介&#xff1a; 在当今软件开发的世界中&#xff0c;接口测试作为保证软件质量的重要一环&#xff0c;其重要性不言而喻。随着前后端分离开发模式的普及&#xff0c;接口测试已成为连接前后端开发的桥梁&#xff0c;确保前后端之间的数据交互准确无误。在这样的背景…

[ruby on rails]rails6.0升级6.1

1.准备工作 在开始升级过程之前&#xff0c;我们有一些建议的准备工作。 升级的时候&#xff0c;最好一个版本一个版本升级&#xff0c;比如6.0到6.1再到7.0&#xff0c;不要一次从6.0到7.0至少80%的测试覆盖率&#xff0c;测试真的很重要&#xff0c;能确保升级快速完成。本…

SpringCloud - 微服务

SpringCloud 是一个用于构建微服务的开源框架&#xff0c;它提供了一系列用于微服务架构的工具和组件&#xff0c;包括服务注册与发现、负载均衡、熔断器、路由等1。以下是关于 SpringCloud 的详细介绍&#xff1a; 1. 服务注册与发现&#xff1a;SpringCloud 提供了服务注册与…

【每日一练】python运算符

1. 算术运算符 编写一个Python程序&#xff0c;要求用户输入两个数&#xff0c;并执行以下运算&#xff1a;加法、减法、乘法、求余、除法、以及第一个数的第二个数次方。将结果打印出来。 a input("请输入第一个数&#xff1a;") b input("请输入第二个数&…

Word中输入文字时,后面的文字消失

当在Word中输入文字时&#xff0c;如果发现后面的文字消失&#xff0c;通常是由以下3个原因造成的&#xff1a; 检查Insert键状态&#xff1a;首先确认是否误按了Insert键。如果是&#xff0c;请再次按下Insert键以切换回插入模式。在插入模式下&#xff0c;新输入的文字会插入…

15秒下雨短视频:成都柏煜文化传媒有限公司

15秒下雨短视频&#xff1a;瞬间的诗意与情感共鸣 在数字时代的浪潮中&#xff0c;短视频以其独特的魅力&#xff0c;成为了人们生活中不可或缺的一部分。其中&#xff0c;一段仅15秒的下雨短视频&#xff0c;成都柏煜文化传媒有限公司 或许在时间长河中只是一瞬间&#xff0c…

adb删除系统应用

连接手机到电脑&#xff1a; 使用 USB 数据线将手机连接到电脑&#xff0c;并确保已启用 USB 调试模式。 打开命令提示符或终端&#xff1a; 在电脑上打开命令提示符&#xff08;Windows&#xff09;或终端&#xff08;Mac、Linux&#xff09;。 检查设备连接&#xff1a; 输…

集群分布式储存

硬件&#xff1a; 存储柜 软件 &#xff1a; software define storage 分布式存储 是一种独特的系统架构由一组能够通过网络连通&#xff0c;为了完成共同任务而协调任务的计算机节点组成分布式是为了使用廉价的普通的计算机完成复杂的计算和存储任务目的就是利用更多的机…

PLC 上位机 下位机 嵌入式 区别

PLC&#xff08;可编程逻辑控制器&#xff09;、上位机、下位机以及嵌入式系统是在工业自动化和控制系统中常见的概念&#xff0c;它们在功能定位、处理能力以及通信协议等方面有所区别。具体分析如下&#xff1a; 功能定位 PLC&#xff1a;直接与传感器、执行器等硬件相连的设…

关于日常开发和面试——集合List及数组避坑之一二

1、集合与循环的碰撞 关于在循环中对集合进行新增或删除元素操作的问题。这是一个常见的陷阱&#xff0c;因为这样做可能导致迭代器失效或者遍历到不应该访问的元素。 以下是一个简单的示例代码&#xff0c;展示了为什么不能在循环中对集合进行新增或删除元素操作&#xff1a…

【详细】CNN中的卷积计算是什么-实例讲解

本文来自《老饼讲解-BP神经网络》https://www.bbbdata.com/ 目录 一、 CNN的基础卷积计算1.1.一个例子了解CNN的卷积计算是什么1.2.卷积层的生物意义 二、卷积的拓展&#xff1a;多输入通道与多输出通道2.1.多输入通道卷积2.2.多输出通道卷积 三、卷积的实现3.1.pytorch实现卷积…

Redis 缓存预热、缓存雪崩、缓存击穿、缓存穿透业务实践

0、前言 本文所有代码可见 > 【gitee code demo】 本文会涉及 缓存预热、缓存雪崩、缓存击穿、缓存穿透介绍和解决方案业务实践 1、缓存预热 1.1、描述 提前将热点数据加载到缓存&#xff0c;提前响应&#xff0c;降低后端数据源访问压力 1.2、实践 Autowiredprivate R…

3、微服务设计为什么要选择DDD

微服务设计为什么要选择DDD 1 软件架构的演进史 在深入探讨为什么在微服务设计中选择领域驱动设计&#xff08;DDD&#xff09;之前&#xff0c;我们先来了解一下软件架构的发展和演变历史。软件架构的演进通常与设备和技术的发展密切相关&#xff0c;随着设备和技术的不断进…

搭建Renesas R7FA8D1BHECBD-BTB的开发调试环境(DAP-LINK: N32G45XVL-STB)

目录 概述 1 软硬件 1.1 软硬件环境信息 1.2 开发板信息 1.3 调试器信息 2 FSP和KEIL产生测试项目 2.1 FSP生成项目 2.2 Keil中配置 3 硬件连接框图 4 一个测试案例 4.1 功能介绍 4.2 定时器函数 5 测试 搭建Renesas R7FA8D1BHECBD-BTB的开发调试环境&#xff08…

MySQL【触发器、存储过程、函数、范式】

day53 MySQL 触发器 创建触发器&#xff1a;&#xff08;before &#xff1a; 前置触发器、after &#xff1a;后置触发器&#xff09; 语法&#xff1a; delimiter xx 指定分隔符xxcreate trigger 触发器名 [before | after] 触发事件 on 表名 for each row 执行语句begin…

java LinkedList 怎么保证线程安全

在 Java 中&#xff0c;LinkedList 本身并不是线程安全的。如果需要在多线程环境中使用 LinkedList&#xff0c;可以采取以下几种方法来保证线程安全性&#xff1a; 1. 使用 Collections.synchronizedList Java 提供了一个实用的方法 Collections.synchronizedList 来包装 Li…

重磅!UOSDN焕新,开启创新之旅!

亲爱的开发者们 经过精心打磨和优化 全新改版的UOSDN&#xff08;统信开发者支持网络&#xff09; 已经正式上线啦&#xff01; 我们致力于为您打造一个更加便捷、高效、富有创意和互动性的开发平台&#xff0c;详情&#x1f449;https://uosdn.uniontech.com/ 以UOSDN作为载…

数字信号处理实验四(FIR数字滤波器设计)

FIR数字滤波器设计&#xff08;2学时&#xff09; 要求&#xff1a; 设计一个最小阶次的低通FIR数字滤波器&#xff0c;性能指标为&#xff1a;通带0Hz~1500Hz&#xff0c;阻带截止频率2000Hz&#xff0c;通带波动不大于1%&#xff0c;阻带波动不大于1%&#xff0c;采样频率为8…

【Chrome开发者工具概览】

Chrome开发者工具概览 一、开启 Chrome 开发者工具1. 如何打开开发者工具2. 主要组成部分 二、Elements 栏的使用1. 修改页面元素2. 调整 CSS 样式3. 搜索功能 三、Console 栏的探索1. 执行 JavaScript2. 调试技巧3. 监听事件和修改元素 四、利用 Sources 栏调试代码1. 查看源代…