微信小程序画布实现星星闪烁

一、核心代码

1）wxml 核心代码

<view class="page"><canvas canvas-id="myCanvas" style="width:{{width}}px;height:{{height}}px"></canvas>
</view>

2）wxss代码

page{
background: #000000;
}

3）js核心代码

  onLoad: function (options) {var that = this;wx.getSystemInfo({//获取系统信息成功，将系统窗口的宽高赋给页面的宽高  success: function (res) {that.setData({width: res.windowWidth,height: res.windowHeight})}})ctx = wx.createCanvasContext('myCanvas')this.drawStars();},
drawStars: function () {let potion = []for (var i = 0; i < 60; i++) {var x = Math.random() * 500;var y = Math.random() * 800;potion.push({ x: x, y: y })}var prevadd = false;var curAlpha = 1;var timer = setInterval(() => {num++;//定位星星的位置for (var i = 0; i < potion.length; i++) {ctx.fillText("☆", potion[i].x, potion[i].y);ctx.fillStyle = "white";}//星星的亮度由1-0.5，再由0.5-1交替变化if (prevadd) {prevadd = true;curAlpha = curAlpha + 0.25;if (curAlpha >= 1)prevadd = false;}else {curAlpha = curAlpha - 0.25;if (curAlpha <= 0.6)prevadd = true;}curAlpha = Math.min(1, curAlpha);ctx.globalAlpha = curAlpha;ctx.draw();if (num == 100) {clearInterval(timer);}}, 1000);},

二、效果图展示，扫描下方小程序码查看动态效果图

三、想看更多效果请搜索微信小程序“简单学习吧”，即可体验点击旋转抽奖效果，小程序还有其他画布效果，持续更新中

微信小程序画布实现星星闪烁相关推荐

微信小程序CSS样式图片闪烁
微信小程序CSS样式图片闪烁微信小程序直接用CSS样式让图片闪烁起来!!! 废话不多说!直接上代码 // 这是设置小程序WXSS页面 .shanshuo{-webkit-animation: twi ...
从实战学习微信小程序-电商星星评分功能（五）
现在,大多数电商系统都是通过五颗星星来进行商品评分的,所以我们要准备两种图片:实心星星和空心星星(如果你想要半星评价也可以加上一个半实星星,实现原理一样) 源码链接下载:https://downloa ...
微信小程序画布组件
完整微信小程序(Java后端) 技术贴目录清单页面(必看) 画布组件,我们可以做一些绘图和动画效果.2.9.0 起支持一套新 Canvas 2D 接口(需指定 type 属性),同时支持同层渲染,原有 ...
微信小程序画布画时针转盘
需求:使用微信小程序画一个12时辰的转盘,每两一个小时转盘上的指针跳动一次,每隔两个小时转盘分区跳动一次. canvas.wxml <view class="canvas-conten ...
微信小程序画布Canvas组件touchend事件不触发处理
一.摘要在微信小程序手势图案锁屏.解锁实现并提供onSuccess等回调一文中,用Canvas画布组件实现了类似Android和Iphone的图案锁屏.解锁功能,除去偶尔卡顿.滑动不连续外,其它都还 ...
微信小程序画布实现冒泡点赞，三阶贝塞尔曲线
一.核心代码 1)wxml 核心代码 <canvas wx:for="{{bezierCount-0}}" wx:key="key" class=&quo ...
微信小程序画布圆形进度条demo
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: wxml  <canvas s ...
微信小程序开发之——星星评分等级显示
一概述本文要实现如下所示的效果:输入要显示的评价等级,界面上就有几颗星亮起,最多5颗二思路界面布局中:五张图片横向排列,使用wx:if和wx:else判断显示哪一个在逻辑文件中,将要显示的 ...
微信小程序画布（canvas）生成图片模糊的解决办法
我们在用微信小程序画canvas可能会遇到生成的图片保存后很模糊的问题,根据之前的经验,我总结了两种解决办法,分别从画canvas,和保存的角度解决,各有利弊. 1.画canvas时,都用设计稿的2倍 ...
微信小程序地图组件无限闪烁导致小程序崩溃
在做一个通过腾讯地图api查询关键词搜索附近标记的小程序时遇到了这个问题在这个事件触发时,会一直重复触发,你不动时地图他还是一直在触发后来调试之后发现是我在bindupdated触发的函数内修改了 ...

微信小程序画布实现星星闪烁

一、核心代码

微信小程序画布实现星星闪烁相关推荐

最新文章

热门文章