uni-app使用canvas层级过高解决方案
2023-06-24 5页 doc 34KB 44阅读
is_856463
暂无简介
举报
uni-app使用canvas层级过高解决方案 uni-app使用canvas层级过高解决方案 效果图解决方法在canvas画完图后，使用uni.canvasToTempFilePath生成本地图进行展示注意：生成图片的时候用setTimeout延迟一下，否则生成的图片会为空代码第一个圆drawProgressbg:function(){//自定义组件实例this，表示在这个自定义组件下查找拥有canvas-id的varctx=uni.createCanvasContext('cpbg',this);ctx.setLineWidt...
uni-app使用canvas层级过高解决 效果图解决方法在canvas画完图后，使用uni.canvasToTempFilePath生成本地图进行展示注意：生成图片的时候用setTimeout延迟一下，否则生成的图片会为空代码第一个圆drawProgressbg:function(){//自定义组件实例this，表示在这个自定义组件下查找拥有canvas-id的varctx=uni.createCanvasContext('cpbg',this);ctx.setLineWidth(12);//设置圆环的宽度ctx.setStrokeStyle('#F5F5F5');//设置圆环的颜色ctx.setLineCap('round');//设置圆环端点的形状ctx.beginPath();//开始一个新的路径ctx.arc(56,60,50,Math.PI,2*Math.PI,false);//设置一个原点(110,110)，半径为100的圆的路径到当前路径ctx.stroke();//对当前路径进行描边ctx.draw();letthat=thissetTimeout(()=>{uni.canvasToTempFilePath({canvasId:'cpbg',success:function(res){console.log('res1',res)that.cpbgCanvasImg=res.tempFilePath}},that)},500)},第二个圆drawCircle:function(step,total){varctx=uni.createCanvasContext('cpbar',this);ctx.setStrokeStyle('#4C77F4');ctx.setLineWidth(12);ctx.setLineCap('round');ctx.beginPath();//参数step为绘制的百分比step=(step/total)+1;if(step>=2){step=step%2;}ctx.arc(56,60,50,Math.PI,step*Math.PI,false);ctx.stroke();ctx.draw();letthat=thissetTimeout(()=>{uni.canvasToTempFilePath({canvasId:'cpbar',success:function(res){console.log('res2',res)that.cpbarCanvasImg=res.tempFilePath}},that)},500)} -全文完-
/
本文档为【uni-app使用canvas层级过高解决方案】，请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑，
图片更改请在作品中右键图片并更换，文字修改请直接点击文字进行修改，也可以新增和删除文档中的内容。
[版权声明] 本站所有资料为用户分享产生，若发现您的权利被侵害，请联系客服邮件isharekefu@iask.cn，我们尽快处理。
本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用。
网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
相关资料
- 关于安置房建设工程质量与进度控制的思考
- 完整word版,FUJI-ACE201-171技术资料
- 第三课 第一框 坚持新发展理念
- InterbrandProposal品牌策略-日日顺，打造引领时代的物流服务品牌
- 化学药物质量控制\采用f2因子法评价溶出曲线的相似性需注意的问题
- 生态文明建设心得体会三篇
- 美术教学设计模板格式
- 试算平衡表excel模版
- 2018年感恩的演讲稿感恩与责任同行
- 跳绳教案
- 李代沫《遗憾》歌词 作词作曲 陈佳明
- 国内各城市斜面日日照时数计算公式
- 总成本总固定成本和总可变成本曲线
- 河北邢台的导游欢迎词
- 【doc】北国森林中的精灵 雪兔
- 《美型妖精大混战》：《美型妖精大混战》-故事梗概，《美型妖精大混战》-人物介绍 美型妖精大混战漫画
- 路由器流程图
- 重点学科申报PPT精选课件
- 赶集_初一记叙文作文200字
- 食品安全自查制度食品安全自查制度范文
热门搜索
- 螺纹规校对规的校验和精度管理规定
- 矿山测量学课件
- 彩色电视机整机检验规范标准
- 常用软件静默安装参数
- 上海交通大学2012年凯原法学院拟录取硕士研究生公示
- 南京师范大学推荐优秀本科毕业生
- 国家自然科学基金空白标书
- 电离辐射防护实践的正当性规定
- 患者发生躁动时应急预案演练记录
- 广东省普通高中学业水平考试(小高考)数学试卷(详细解答)
- 8.3‰是业务招待费节税“临界点”
- 山东省建筑施工特种作业电工(施工现场临时用电及安全生产知识模拟题三讲述(与“作业”相关共42张)
- 财务损益表模板
- 基于主元分析法的多联机系统压缩机排气温度传感器故障检测
- 螺纹规校对规的校验和精度管理规定
- 矿山测量学课件
- 彩色电视机整机检验规范标准
- 常用软件静默安装参数
- 上海交通大学2012年凯原法学院拟录取硕士研究生公示
- 南京师范大学推荐优秀本科毕业生
- 国家自然科学基金空白标书
- 电离辐射防护实践的正当性规定
- 患者发生躁动时应急预案演练记录
- 广东省普通高中学业水平考试(小高考)数学试卷(详细解答)
- 8.3‰是业务招待费节税“临界点”
- 山东省建筑施工特种作业电工(施工现场临时用电及安全生产知识模拟题三讲述(与“作业”相关共42张)
- 财务损益表模板
- 基于主元分析法的多联机系统压缩机排气温度传感器故障检测
你可能还喜欢
浙公网安备 33021202002483