|
作者：優(yōu)美麗生活，來自原文地址
大家在手機(jī)流量頁面的時(shí)候，應(yīng)該也看到過各種看起來很科幻的各種變化的圖形，看久了就會出現(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">點(diǎn)擊進(jìn)入圖形縮放頁面</button></view>
-
</view>
部分重要代碼如下：
-
Page({
-
onReady:function(e){
-
var cxt_scale = wx.createContext();//創(chuàng)建并返回繪圖上下文context對象。
-
var scale=0;//默認(rèn)縮放倍數(shù)為0，大于0為放大，小于0位縮小
-
setInterval(function(){ //無限循環(huán)定時(shí)函數(shù)
-
scale+=0.5;// 向縮小后放大
-
if(scale==10){//但放大位數(shù)為10倍時(shí)，設(shè)置放大倍數(shù)為1
-
scale=1
-
}
-
cxt_scale.scale(scale,scale)//對橫縱坐標(biāo)進(jìn)行縮放
-
cxt_scale.rect(0,0,10,10)//邊長為為10px的正方形
-
cxt_scale.stroke();//對當(dāng)前路徑進(jìn)行描邊
-
wx.drawCanvas({
-
canvasId:'canvasAutoScale',//畫布標(biāo)識，對應(yīng)<canvas/>的cavas-id
-
actions:cxt_scale.getActions()//導(dǎo)出context繪制的直線并顯示到頁面
-
});
-
},200)
-
}
-
})
源碼下載：使用畫布組件繪制一個(gè)會自動縮放的正方體.rar
|
