小程序开发canvals转盘在手机上不转,开发工具一切正常
2019-03-15 18:17:35
微信公开课小程序热门讨论关于「小程序开发canvals转盘在手机上不转,开发工具一切正常」的小程序开发问题
补充:你想反馈一个BugBug表现是什么预期表现是什么写了一个转盘的canvals开发工具上正常旋转,在手机上预览的时候就不转不知道什么问题如何复现提供一个最简复现Demo微信者回复开发者回复
展开:你想反馈一个Bug*Bug表现是什么预期表现是什么写了一个转盘的canvals开发工具上正常旋转,在手机上预览的时候就不转不知道什么问题*如何复现*提供一个最简复现Demo即速小程序:用一个这种的办法解决了问题,虽然笨点,还是实现了:审核过了:大兄弟,如果审核过了麻烦说一声:没办法这样子做,canvas在手机上的实现方式和网页不同,是native层,不能在上边应用动画:有人恢复吗:是canvas写错了,不好意思 代目如下wxml代码如下<canvasanimation={{animationData}}style=width:300px;height:300px;canvasid=lotteryCanvas<canvas<viewbindtap=getLotteryclass=canvasbtn抽奖<viewwxss代码如下canvasbtn{position:relative;left:110px;top:110px;zindex:100;width:80px;height:80px;borderradius:50%;color:F4E9CC;backgroundcolor:E44025;lineheight:80px;textalign:center;fontsize:20px;textshadow:01px1pxrgba(0,0,0,6);boxshadow:03px5pxrgba(0,0,0,6);textdecoration:none;}js代码如下Page({data:{animationData:{},},getLottery:function(){varthat=this;初始化rotatevaranimationInit=wxcreateAnimation({duration:1})thisanimationInit=animationInit;animationInitrotate(0)step();thissetData({animationData:animationInitexport(),})旋转抽奖setTimeout(function(){varanimationRun=wxcreateAnimation({duration:4000,timingFunction:ease});thatanimationRun=animationRunanimationRunrotate(360*8)step();thatsetData({animationData:animationRunexport()})}bind(this),100)},onShow:function(e){varthat=this;getAwardsConfigvarawardsConfig=[{index:0,name:红包一个,id:5},{index:1,name:下次努力,id:0},{index:2,name:3元券,id:4},{index:3,name:下次努力,id:0},{index:4,name:5元券,id:3},{index:5,name:下次努力,id:0},{index:6,name:半价苹果,id:2},{index:7,name:下次努力,id:0},{index:8,name:免费苹果,id:1},{index:9,name:下次努力,id:0}];wxsetStorageSync(awardsConfig,JSONstringify(awardsConfig))绘制转盘varlen=awardsConfiglength,rotateDeg=360len2+90,turnNum=1len文字旋转turn值varctx=wxcreateCanvasContext(lotteryCanvas,this);生成一个绘图的canvals对象for(vari=0;i<len;i++){保存当前状态ctxsave();开始一条新路径ctxbeginPath();位移到圆心,下面需要围绕圆心旋转150150是300长宽正方形的中心点ctxtranslate(150,150);从(0,0)坐标开始定义一条新的子路径ctxmoveTo(0,0);旋转弧度,需将角度转换为弧度,使用degrees*MathPI180公式进行计算ctxrotate((360len*irotateDeg)*MathPI180);绘制圆弧ctxarc(0,0,150,0,2*MathPIlen,false);颜色间隔if(i%2==0){ctxsetFillStyle(ffb820);}else{ctxsetFillStyle(ffcb3f);}填充扇形ctxfill();绘制边框ctxsetLineWidth(05);ctxsetStrokeStyle(e4370e);ctxstroke();ctxsetFontSize(20);ctxsetFillStyle(black);ctxfillText(awardsConfig[i]name,60,30);恢复前一个状态ctxrestore();}ctxdraw();}}):请提供关键代码,可以自己尝试一下用最小的代码复现你所描述的问题,不然我们也无法知道你的问题还有,你说的canvals是canvas么:直接上代码:提供一个最简复现Demo
更多有关「小程序开发canvals转盘在手机上不转,开发工具一切正常」的讨论可以前往微信公开课小程序参与互动哦!
补充:你想反馈一个BugBug表现是什么预期表现是什么写了一个转盘的canvals开发工具上正常旋转,在手机上预览的时候就不转不知道什么问题如何复现提供一个最简复现Demo微信者回复开发者回复
展开:你想反馈一个Bug*Bug表现是什么预期表现是什么写了一个转盘的canvals开发工具上正常旋转,在手机上预览的时候就不转不知道什么问题*如何复现*提供一个最简复现Demo即速小程序:用一个这种的办法解决了问题,虽然笨点,还是实现了:审核过了:大兄弟,如果审核过了麻烦说一声:没办法这样子做,canvas在手机上的实现方式和网页不同,是native层,不能在上边应用动画:有人恢复吗:是canvas写错了,不好意思 代目如下wxml代码如下<canvasanimation={{animationData}}style=width:300px;height:300px;canvasid=lotteryCanvas<canvas<viewbindtap=getLotteryclass=canvasbtn抽奖<viewwxss代码如下canvasbtn{position:relative;left:110px;top:110px;zindex:100;width:80px;height:80px;borderradius:50%;color:F4E9CC;backgroundcolor:E44025;lineheight:80px;textalign:center;fontsize:20px;textshadow:01px1pxrgba(0,0,0,6);boxshadow:03px5pxrgba(0,0,0,6);textdecoration:none;}js代码如下Page({data:{animationData:{},},getLottery:function(){varthat=this;初始化rotatevaranimationInit=wxcreateAnimation({duration:1})thisanimationInit=animationInit;animationInitrotate(0)step();thissetData({animationData:animationInitexport(),})旋转抽奖setTimeout(function(){varanimationRun=wxcreateAnimation({duration:4000,timingFunction:ease});thatanimationRun=animationRunanimationRunrotate(360*8)step();thatsetData({animationData:animationRunexport()})}bind(this),100)},onShow:function(e){varthat=this;getAwardsConfigvarawardsConfig=[{index:0,name:红包一个,id:5},{index:1,name:下次努力,id:0},{index:2,name:3元券,id:4},{index:3,name:下次努力,id:0},{index:4,name:5元券,id:3},{index:5,name:下次努力,id:0},{index:6,name:半价苹果,id:2},{index:7,name:下次努力,id:0},{index:8,name:免费苹果,id:1},{index:9,name:下次努力,id:0}];wxsetStorageSync(awardsConfig,JSONstringify(awardsConfig))绘制转盘varlen=awardsConfiglength,rotateDeg=360len2+90,turnNum=1len文字旋转turn值varctx=wxcreateCanvasContext(lotteryCanvas,this);生成一个绘图的canvals对象for(vari=0;i<len;i++){保存当前状态ctxsave();开始一条新路径ctxbeginPath();位移到圆心,下面需要围绕圆心旋转150150是300长宽正方形的中心点ctxtranslate(150,150);从(0,0)坐标开始定义一条新的子路径ctxmoveTo(0,0);旋转弧度,需将角度转换为弧度,使用degrees*MathPI180公式进行计算ctxrotate((360len*irotateDeg)*MathPI180);绘制圆弧ctxarc(0,0,150,0,2*MathPIlen,false);颜色间隔if(i%2==0){ctxsetFillStyle(ffb820);}else{ctxsetFillStyle(ffcb3f);}填充扇形ctxfill();绘制边框ctxsetLineWidth(05);ctxsetStrokeStyle(e4370e);ctxstroke();ctxsetFontSize(20);ctxsetFillStyle(black);ctxfillText(awardsConfig[i]name,60,30);恢复前一个状态ctxrestore();}ctxdraw();}}):请提供关键代码,可以自己尝试一下用最小的代码复现你所描述的问题,不然我们也无法知道你的问题还有,你说的canvals是canvas么:直接上代码:提供一个最简复现Demo
更多有关「小程序开发canvals转盘在手机上不转,开发工具一切正常」的讨论可以前往微信公开课小程序参与互动哦!
标签:微信公开课,小程序
「小程序开发canvals转盘在手机上不转,开发工具一切正常」热门讨论订阅
方法1:微信扫描微信公开课小程序码即可订阅热门讨论「小程序开发canvals转盘在手机上不转,开发工具一切正常」
方法2:微信搜索微信公开课小程序名称进入,即可订阅热门讨论「小程序开发canvals转盘在手机上不转,开发工具一切正常」
方法3:微信网页访问即速商店,长按识别微信公开课小程序码即可订阅热门讨论「小程序开发canvals转盘在手机上不转,开发工具一切正常」
微信公开课小程序热门讨论「小程序开发canvals转盘在手机上不转,开发工具一切正常」由微信公开课原创摘录于微信小程序商店shop.jisuapp.cn,转载请注明出处。
微信公开课热门讨论「小程序开发canvals转盘在手机上不转,开发工具一切正常」由微信公开课开发者向微信用户提供,并对本服务内容、数据资料及其运营行为等真实性、合法性及有效性承担全部责任。
微信公开课小程序
更新时间:2019-03-15 18:17:35
>
__methodCallerx27;ofundefined
>-404011cloudfunctionexecutionerror
>,请补充选择商家自营-预付卡销售-发行方类目,并在基础信息处申请该类目,通过
>:host在模拟器中显示无效
>:请在小程序服务页面上架正式(非测试)内容或商品后重新提交审核
>.net 微信小程序 上传图片
>'setTimeout'的问题
>‘三朵里熙SPA主题减压空间’为什么搜索关键词‘三朵里‘搜不到
>‘扫普通链接二维码打开小程序‘中设置为体验版,扫码打开是线上版本
>“cloudfunctions**indexjs”gitignore
>“NO ULINK DEVICE FOUND”是怎么回事
>“万马掌上校园”的类目审核
>“上线了”公司开发的微信小程序怎么样?
>“产品是否一定需要条形码”
>