用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

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

纸飞机 2018-3-8 09:37

作者:优美丽生活,来自原文地址 大家在手机流量页面的时候,应该也看到过各种看起来很科幻的各种变化的图形,看久了就会出现眩晕的感觉。那么这种图片是怎么做出来的呢?今天我们就给大家简单演示一下,如何使用画 ...

作者:优美丽生活,来自

原文地址


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

首页源码:

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

部分重要代码如下:

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

源码下载:

使用画布组件绘制一个会自动缩放的正方体.rar

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏