微信小程序中setInterval的使用方法
看了下小程序的画布功能，简单的使用了一下，用蹩脚的逻辑做了个 “弹啊弹，弹走鱼尾纹的小球”，一起来看下吧。过程不重要主要是画布的使用哦。（本来想传gif的来着，后来发现不会传，就传个图片吧，想看的自己下载下来玩呦）
先上图，后上代码了：
js:
var winWidth = 0
var winHeight = 0
var diameter = 10
var time = 0
Page({
data:{
numX:1,
numY:1
},
xy:{
//小球的xy坐标
x:10,
y:10
},
onLoad:function(options){
//进来先获取手机的屏幕宽度和高度
wx.getSystemInfo({
success: function(res) {
console.log(res)
winHeight = res.windowHeight;
winWidth = res.windowWidth;
}
})
},
onReady:function(){
//循环滚动小球
for(var i=0;i<1;i++){
//随机一个滚动的速度
time = (1+Math.random()*10)
setInterval(this.move,time);
console.log(time)
}
},
move(){
//x
if(this.data.numX == 1){
this.xy.x++
}else{
this.xy.x--
}
//判断x轴的状态
if(this.xy.x == winWidth-diameter){
this.data.numX=2
}
if(this.xy.x == diameter){
this.data.numX=1
}
//y
if(this.data.numY == 1){
this.xy.y++
}else{
this.xy.y--
}
//判断y轴的状态
if(this.xy.y == 400-diameter){
this.data.numY=2
}
if(this.xy.y == diameter){
this.data.numY=1
}
//画图
this.ballMove(this.xy.x,this.xy.y);
},
ballMove(x,y){
// 使用 wx.createContext 获取绘图上下文 context
var context = wx.createContext()
// context.setShadow(0,1,6,'#000000')//阴影效果
context.setFillStyle("#FF4500")//球的颜色
context.setLineWidth(2)
context.arc(x, y, diameter, 0, 2 * Math.PI, true)
context.fill()
// 调用 wx.drawCanvas，通过 canvasId 指定在哪张画布上绘制，通过 actions 指定绘制行为
wx.drawCanvas({
canvasId: 'ball',
actions: context.getActions() // 获取绘图动作数组
})
}
})
wxml:
canvas-id="ball">
如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“微信小程序中setInterval的使用方法”评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。