首頁 > 微信小程式 > 小程式開發 > 使用小程式畫布組件繪製自動縮放正方形功能

使用小程式畫布組件繪製自動縮放正方形功能

高洛峰
發布: 2017-03-16 13:37:35
原創
2506 人瀏覽過

大家在手機流量頁面的時候,應該也看到各種看起來很科幻的各種變化的圖形,看久了就會出現眩暈的感覺。那麼這種圖片是怎麼做出來的呢?今天我們就給大家簡單示範一下,如何使用小程式畫布元件繪製自動縮放正方形
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:&#39;canvasAutoScale&#39;,//画布标识,对应<canvas/>的cavas-id
      actions:cxt_scale.getActions()//导出context绘制的直线并显示到页面
    });
    },200)   
  }
})
登入後複製


以上是使用小程式畫布組件繪製自動縮放正方形功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板