1.教你：微信小程序如何實現(xiàn)scroll-view隱藏滾動條
2.教你：如何使用scroll-view組件實現(xiàn)視圖垂直滾動（附源碼）
3.教你：小程序如何使用swiper組件實現(xiàn)圖片切換（附源碼）
4.教你：微信小程序中如何設置撥打電話（附源碼）
5.教你：如何打開小程序如何打開微信自帶的地圖（附源碼）
6. 教你：如何使用小程序畫布組件繪制自動縮放正方形（附源碼）
大家在手機流量頁面的時候，應該也看到過各種看起來很科幻的各種變化的圖形，看久了就會出現(xiàn)眩暈的感覺。那么這種圖片是怎么做出來的呢？今天我們就給大家簡單演示一下，如何使用小程序畫布組件繪制自動縮放正方形
1.頁面顯示正方形圖片。
2.正方形逐漸放大。
動態(tài)效果圖如下：
首頁源碼如下：
<view class="copyright">
<view class="copyright_item">CopyRight：All Right Reserved</view>
<view class="copyright_item">原創(chuàng)作者：html51.com</view>
<view class="copyright_item">微信小程序開發(fā)者社區(qū)：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();//創(chuàng)建并返回繪圖上下文context對象。
var scale=0;//默認縮放倍數(shù)為0，大于0為放大，小于0位縮小
setInterval(function(){ //無限循環(huán)定時函數(shù)
scale+=0.5;// 向縮小后放大
if(scale==10){//但放大位數(shù)為10倍時，設置放大倍數(shù)為1
scale=1
}
cxt_scale.scale(scale,scale)//對橫縱坐標進行縮放
cxt_scale.rect(0,0,10,10)//邊長為為10px的正方形
cxt_scale.stroke();//對當前路徑進行描邊
wx.drawCanvas({
canvasId:'canvasAutoScale',//畫布標識，對應
actions:cxt_scale.getActions()//導出context繪制的直線并顯示到頁面
});
},200)
}
})
使用小程序畫布組件繪制自動縮放正方形源碼如下：
使用畫布組件繪制一個會自動縮放的正方體.rar
