使用小程序画布组件绘制自动缩放正方形技巧
时间：2024/6/4作者：未知来源：手揣网教程人气：
- [摘要]大家在手机流量页面的时候，应该也看到过各种看起来很科幻的各种变化的图形，看久了就会出现眩晕的感觉。那么这种图片是怎么做出来的呢？今天我们就给大家简单演示一下，如何使用小程序画布组件绘制自动缩放正方形...大家在手机流量页面的时候，应该也看到过各种看起来很科幻的各种变化的图形，看久了就会出现眩晕的感觉。那么这种图片是怎么做出来的呢？今天我们就给大家简单演示一下，如何使用小程序画布组件绘制自动缩放正方形
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倍时，设置放大倍数为1 scale=1 } cxt_scale.scale(scale,scale)//对横纵坐标进行缩放 cxt_scale.rect(0,0,10,10)//边长为为10px的正方形 cxt_scale.stroke();//对当前路径进行描边 wx.drawCanvas({ canvasId:'canvasAutoScale',//画布标识，对应<canvas/>的cavas-id actions:cxt_scale.getActions()//导出context绘制的直线并显示到页面 }); },200) } })以上就是使用小程序画布组件绘制自动缩放正方形功能的详细内容，更多请关注php中文网其它相关文章！
小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。
关键词：运用小程序画布组件绘制自动缩放正方形技巧