1. 程式人生 > >微信小程式例子——使用畫布元件繪製一個會自動縮放的正方體

微信小程式例子——使用畫布元件繪製一個會自動縮放的正方體

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',//畫布標識,對應的cavas-id
      actions:cxt_scale.getActions()//匯出context繪製的直線並顯示到頁面
    });
    },200)    
  }
})

相關推薦

程式例子——使用畫布元件繪製一個自動正方體

Page({ onReady:function(e){ var cxt_scale = wx.createContext();//建立並返回繪圖上下文context物件。 var scale=0;//預設縮放倍數為0,大於0為放大,小於0位縮小 setInterval(functi

程式例子——使用畫布元件繪製一條長度為230px的水平直線

1、效果展示 2、關鍵程式碼 index.wxml empty index.js Page({ onReady:function(e){ var context = wx.crea

程式例子——使用畫布元件繪製一個長200px,寬100px的長方形

1、效果展示 2、關鍵程式碼 index.wxml index.js Page({ onReady:function(){ // 頁面渲染完成 var ctxt_rect

程式例子——使用icon元件顯示常用圖示

1、效果展示 2、關鍵程式碼 3、原始碼獲取方式 百度雲連結:http://pan.baidu.com/s/1hsNoIK8 密碼:sdi0 4、在使用icon元件顯示常用圖片的過程中有遇到任何問題或者不明白的地方,歡迎新增我的微信進行諮詢,感謝支援!微訊號:Fu

程式例子——使用video元件播放視訊

1、效果展示 2、關鍵程式碼 1、index.wxml 2、index.js Page({ data:{ // text:"這是一個頁面" }, videoErrorCa

程式例子——使用image元件顯示圖片

1、效果展示 2、關鍵程式碼 1、index.wxml 2、index.js Page({ data:{ // text:"這是一個頁面" imageSrc:'../../pages/image/img.png' } }) 3、原始碼獲取

程式例子——使用text元件實現轉義符換行

1、效果展示 2、關鍵程式碼 index.wxml {{txt}} index.js var initTxt = '我是在轉義換行符前的文字\n我是在轉義換行符後的文字' Page({ data: { txt: initTxt }, }) 3、

程式例子——使用audio元件播放音樂

1、效果展示 2、關鍵程式碼 1、index.wxml 2、index.js Page({ data: { audioPoster: 'http://y.gtimg.cn/m

程式畫布】一:canvas元件

 有問題可以掃碼加我微信,有償解決問題。承接小程式開發。 微信小程式開發交流qq群   173683895  、 526474645 ; 正文: 此文章主要是對canvas元件的介紹與基本的使用。在元件中繪畫了一條固定的直線。 我們先了解一下canvas元件: wx

程式web-view元件

小程式web-view元件   不久前微信小程式釋出了web-view元件,這個訊息在各個圈裡引起不小的漣漪。近期正好在做小程式的專案,便研究了一下這個讓大家充滿期待的元件。   1,web-view這個元件是什麼鬼? 官網的介紹:web-view 元件是一個

程式:map元件

        其實前些天,吳哥就說讓我加上一個定位,我說我還沒看文件,還沒學,暫時沒加。今天上午終於開始接受map元件的挑戰,我不滴不說我真的是很懶,好吧,也有點會拒絕困難,但如果真的需要,我也可以去學習去解決,大概我的身邊缺少一個讓我有動力的吧,別問我

程式 自定義元件之《轉盤》

微信小程式支援簡潔的元件化程式設計 開發者可以將頁面內的功能模組抽象成自定義元件,以便在不同的頁面中重複使用;也可以將複雜的頁面拆分成多個低耦合的模組,有助於程式碼維護。自定義元件在使用時與基礎元件非常相似。 這篇博文主要就是分享個自己實際專案中用到的 轉盤自定義元件 專案

程式-02(元件應用主要是style應用)

目錄  居中 不換行 邊學邊更新了 居中 <view class='labelStyle'><label>使用者登陸</label></view> .labelStyle{ display: flex;

程式----自定義元件

微信小程式充分借鑑了vue的程式碼風格,但是卻沒有像vue那樣的高效的元件特性。但是這一備受詬病的地方在小程式1.6.3版本得到了解決。 從小程式基礎庫版本 1.6.3 開始,小程式支援簡潔的元件化程式設計。所有自定義元件相關特性都需要基礎庫版本 1.6.3 或更高。 接下來,

程式開發框架——元件

    元件的概念,如圖:     小程式給我們提供的元件,如圖  八類元件:1.檢視容器元件主要控制頁面內容、檢視容器可以理解為一個盒子在這個盒子裡面可以裝入更小的盒子填滿,這裡提供有5種: &nb

程式——自定義元件時,編譯報`Component is not found in path '...'`

問題描述: 在微信小程式中自定義元件時,編譯報Component is not found in path '...' VM4941:1 jsEnginScriptError Component is not found in path "components/watermark

程式--自定義元件之搜尋框

元件:搜尋框 功能:根據輸入框輸入值進行模糊查詢並在下方滑動框中顯示 功能圖:     component.wxml <!--自定義元件--> <!---搜尋框 start--> <view class='main'&

程式自定義元件(一)

好吧,突然發現學不完了,一下子,那就分開吧,由於時間太久,直接重新大致複習了一下 微信小程式自定義元件微信小程式支援自定義元件下方的目錄其中,components為元件目錄,nodemodules為模組目錄,pages為小程式的頁面目錄,utils為一些基礎功能的封

程式自定義元件(二)

微信小程式自定義元件 ps 由於作業部落貌似出了點問題,耽誤了點時間,找了一個stackedit.io準備寫。無奈,這是要自己建編輯器的節奏啊。沒有一個能靠的注 為何存在元件 元件間的關係 使用relations實現元件的關係,即父子關係。 定義和使用元件間的關係

程式 image圖片元件實現寬度固定 高度自適應

新增mode屬性 <image class="empty-icon" src="/pages/image/list-emptyx2.png" mode="widthFix"></image> mode 有效值: mode 有 13 種模式,其中 4 種是縮放模式