微信小程序_小球弹啊弹(画布的简单使用)

看了下小程序的画布功能，简单的使用了一下，用蹩脚的逻辑做了个 “弹啊弹，弹走鱼尾纹的小球”，一起来看下吧。过程不重要主要是画布的使用哦。（本来想传gif的来着，后来发现不会传，就传个图片吧，想看的自己下载下来玩呦）

先上图，后上代码了：

js:

var winWidth = 0
var winHeight = 0
var diameter = 10
var time = 0Page({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}//yif(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 获取绘图上下文 contextvar 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:

<view><canvas canvas-id="ball"></canvas>
</view>

demo下载：弹力小球

感谢观看，学以致用更感谢~

微信小程序_小球弹啊弹(画布的简单使用)相关推荐

解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题
解决微信小程序IOS中使用picker弹出内容和手机软键盘重叠的问题项目需求: 一个信息提交页面:有input输入框,有picker选择器遇到的问题: 点击input输入框时,手机自动弹出键盘,但 ...
微信小程序_基础组件学习02
微信小程序_基础组件学习02 swiper组件 swiper是滑块容器,也就是手机端的轮播图. swiper组件有两部分组成swiper和swiper-item. swiper-item需要放在swi ...
微信小程序_小程序开发框架
微信小程序_小程序开发框架微信小程序框架微信小程序小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生APP体验的服务. 框架提供了自己的视图层描述语言WXML和WXS ...
微信小程序_(校园视)开发视频的展示页_上
微信小程序_(校园视) 开发用户注册登陆传送门微信小程序_(校园视) 开发上传视频业务传送门微信小程序_(校园视) 开发视频的展示页-上传送门微信小程序_(校园视) 开发视频的展示页-下 ...
微信小程序_调用openAi搭建虚拟伙伴聊天
微信小程序_调用openAi搭建虚拟伙伴聊天背景效果关于账号注册接口实现 8行python搞定小程序实现页面结构数据逻辑结束背景从2022年的年底,网上都是chagpt的传说,个人 ...
小程序源码：宝宝起名神器微信小程序源码下载-多玩法安装简单
这款小程序支持输入姓氏自动起名,不满意还可以点击换一换来找到满意的支持起两个字或者三个字的名字另外小编也给该款小程序添加了几个流量给大家下面就来看看小编的测试演示图吧! 小程序源码下载地址:小程 ...
微信小程序导航栏或菜单栏吸顶效果简单实现
微信小程序导航栏或菜单栏吸顶效果简单实现思路: 1.获取导航栏初始位置距顶部的距离s1(通过获取页面标签方法) 2.监听页面的滑动,获取滑动距离s2(使用onPageScroll) 3.当s2> ...
小程序源码：2022虎年全新头像框制作微信小程序源码下载-多玩法安装简单
给大家带来一款以2022虎年为主的一款头像制作小程序源码内包含了虎年虎娃框,2022元旦新年框,国庆几种分类每一种分类都包含了多种模板制作虎娃的小编个人感觉那个卡通也是挺可爱的! 另外整个小程序 ...
小程序源码：2022虎年背景全新UI头像框制作微信小程序源码下载-多玩法安装简单
内包含了虎年虎娃多种分类头像框模板,全是和2022虎年有关每一种分类都包含了多种模板制作虎娃的小编个人感觉那个卡通也是挺可爱的! 另外整个小程序的背景UI都是以虎年为背景,所以总体的感觉还是很不错 ...

微信小程序_小球弹啊弹(画布的简单使用)

微信小程序_小球弹啊弹(画布的简单使用)相关推荐

最新文章

热门文章