作者：優美麗生活，來自原文地址 
大家在手機流量頁面的時候，應該也看到過各種看起來很科幻的各種變化的圖形，看久了就會出現眩暈的感覺。那么這種圖片是怎么做出來的呢？今天我們就給大家簡單演示一下，如何使用小程序畫布組件繪制自動縮放正方形 
1.頁面顯示正方形圖片。 
2.正方形逐漸放大。 
動態效果圖如下： 

首頁源碼：

1. <view class="copyright">
2. <view class="copyright_item">CopyRight：All Right Reserved</view>
3. <view class="copyright_item">原創作者：html51.com</view>
4. <view class="copyright_item">微信小程序開發者社區：51小程序</view>
5. <view class="copyright_item"><image class="img" src="../copyright/image/logo.png"/></view>
6. <view class="goto_counter"><button type="default" bindtap="goto_counter">點擊進入圖形縮放頁面</button></view>
7. </view>

部分重要代碼如下：

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',//畫布標識，對應<canvas/>的cavas-id
15. actions:cxt_scale.getActions()//導出context繪制的直線并顯示到頁面
16. });
17. },200)
18. }
19. })

源碼下載：使用畫布組件繪制一個會自動縮放的正方體.rar