如何使用小程序畫布組件繪製自動縮放正方形

你們在手機流量頁面的時候，應該也看到過各類看起來很科幻的各類變化的圖形，看久了就會出現眩暈的感受。那麼這種圖片是怎麼作出來的呢？今天咱們就給你們簡單演示一下，如何使用小程序畫布組件繪製自動縮放正方形
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)   
  }
})

源碼下載地址：http://bbs.html51.com/t-1046-...