如何使用小程序画布组件绘制自动缩放正方形

大家在手机流量页面的时候，应该也看到过各种看起来很科幻的各种变化的图形，看久了就会出现眩晕的感觉。那么这种图片是怎么做出来的呢？今天我们就给大家简单演示一下，如何使用小程序画布组件绘制自动缩放正方形
1.页面显示正方形图片。
2.正方形逐渐放大。

动态效果图如下：

首页源码如下：

<view class="copyright"><view class="copyright_item">CopyRight：All Right Reserved</view><view class="copyright_item">原创作者：html51.com</view><view class="copyright_item">微信小程序开发者社区：51小程序</view><view class="copyright_item"><image class="img" src="../copyright/image/logo.png"/></view><view class="goto_counter"><button type="default" bindtap="goto_counter">点击进入图形缩放页面</button></view>
</view>

部分重要代码如下：

Page({onReady:function(e){var cxt_scale = wx.createContext();//创建并返回绘图上下文context对象。var scale=0;//默认缩放倍数为0，大于0为放大，小于0位缩小setInterval(function(){ //无限循环定时函数 scale+=0.5;// 向缩小后放大if(scale==10){//但放大位数为10倍时，设置放大倍数为1scale=1}cxt_scale.scale(scale,scale)//对横纵坐标进行缩放cxt_scale.rect(0,0,10,10)//边长为为10px的正方形cxt_scale.stroke();//对当前路径进行描边wx.drawCanvas({canvasId:'canvasAutoScale',//画布标识，对应<canvas/>的cavas-idactions:cxt_scale.getActions()//导出context绘制的直线并显示到页面});},200)   }
})

源码下载地址：http://bbs.html51.com/t-1046-...

如何使用小程序画布组件绘制自动缩放正方形相关推荐

微信小程序画布组件
完整微信小程序(Java后端) 技术贴目录清单页面(必看) 画布组件,我们可以做一些绘图和动画效果.2.9.0 起支持一套新 Canvas 2D 接口(需指定 type 属性),同时支持同层渲染,原有 ...
微信小程序：map地图自动缩放自适应大小
文档: https://developers.weixin.qq.com/miniprogram/dev/api/media/map/wx.createMapContext.html https:// ...
微信小程序画布Canvas组件touchend事件不触发处理
一.摘要在微信小程序手势图案锁屏.解锁实现并提供onSuccess等回调一文中,用Canvas画布组件实现了类似Android和Iphone的图案锁屏.解锁功能,除去偶尔卡顿.滑动不连续外,其它都还 ...
支付宝小程序camera组件取景框绘制
因公司需求,要将微信小程序转战到支付宝上面,恰好又是原生的写法,那只能迎着公司的需求来咯现有一套微信的现成的源码,又不想重新写,费时又费力,这里推荐一个微信转支付宝的插件,贼好用 Antmove 小 ...
小程序画布合成二维码海报图，并保存到相册
小程序画布合成二维码海报图,并保存到相册实现效果如下图: 步骤分析 1,先获取需要合成的海报和二维码. 2,获取图片的本地路径,如果图片不是网络连接则不需要此操作. 3,通过手机型号,根据屏幕的大小 ...
uniapp开发微信小程序使用painter绘制海报
uniapp开发微信小程序使用painter绘制海报参考文章: 1.简书大佬文章https://www.jianshu.com/p/e9cab600cf6c 2.CSDN大佬文章https://bl ...
基于canvas 2D实现微信小程序自定义组件-环形进度条
基于canvas 2D实现微信小程序自定义组件-环形进度条最近开发一个小程序项目博闻金榜答题小程序,需要使用到一个可以显示答题倒计时的组件,基于进度条实现,下面就主要介绍基于canvas2D实现一个 ...
【微信小程序】组件使用及属性参考
文章目录 3.1 视图容器组件 3.1.1 视图容器view 3.1.2 滚动视图scroll-view 3.1.3 可移动视图movable-view 3.1.4 覆盖视图 3.1.5 滑块视图sw ...
app vue 真机运行_uni-app黑魔法：小程序自定义组件运行到H5平台
引言移动互联网的初期,囿于设备硬件性能限制,流量以原生App为主,iOS.Android是当时两大平台. 随着硬件及OS的更新换代,H5可承载的体验逐步完善,为提高开发效率.节约资源(复用代码)以及 ...
手把手教你写一个微信小程序日历组件
今天我们一起写一个微信小程序日历组件微信小程序日历组件 github.com/749264345/w- 好,我们先看一下要实现的模样,如下图由以上截图我们可以看到 1.日历可以通过按钮[切换展示效 ...

如何使用小程序画布组件绘制自动缩放正方形

如何使用小程序画布组件绘制自动缩放正方形相关推荐

最新文章

热门文章