极速快3精准计划|极速快3有规律吗
用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

微信小程序如何將圖片畫到canvas中

Rolan 2019-4-17 00:16

微信小程序開發第二彈:canvas是新的h5標簽,相信在前端技術中大家使用的已經非常多了,但是在微信小程序開發中,應該如何將圖片置入canvas中呢?這篇經驗來和大家分享一下!工具/原料微信web開發者工具方法/步驟1:先是 ...

微信小程序開發第二彈:canvas是新的h5標簽,相信在前端技術中大家使用的已經非常多了,但是在微信小程序開發中,應該如何將圖片置入canvas中呢?這篇經驗來和大家分享一下!

工具/原料
微信web開發者工具
方法/步驟1:

先是照樣先寫好一個html文件,不過由于是微信小程序,所以要按照wxml的標準來寫。頭尾文件都不需要,直接修改index.wxml,

方法/步驟2:

尋找一張準備置入的圖片,保存在網絡環境中。可以轉換成base64,也可以保存在自己的服務器端。本地調試的時候需要使用。我就拿這個小黃人來舉例吧。

方法/步驟3:

在canvas內進行圖像繪制,要先定義一個函數。

方法/步驟4:

我們先建立一個動作,將圖片置入進去。引用函數context.drawImage()函數即可,但是要調整圖片大小;

方法/步驟5:

但是不能使用draw(true)來進行鋪滿,所以尺寸必須自己來指定,或者使用js來讀取device的height和width。使圖片達到預想的效果。

方法/步驟6:

微信小程序的WXML和HTML格式有點差別,不能直接調用函數,所以必須使用匿名函數的形式,或者直接綁定事件。

方法/步驟7:

最后是進行不同機型的調試,在微信開發工具左上方可以調整,主要是看不同尺寸顯示問題,如果有必要還要進行wifi,4G,2G測試

注意事項
使用context.drawImage();的時候,還需要限制起始位置與圖片大小
這里僅僅提供思路,如果是制作頁面,還需要使用wx.downloadFile
鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 快資訊 來自: 快資訊
极速快3精准计划 鸿彩app下载 香港智能历史开奖记录查询 20远8开奖结果走势图 中福在线每人每天限购 11选五奖金规则 江苏时时开奖规则 腾讯分分彩是腾讯旗下的吗 凤彩网彩票官网网站 时时缩水ios 秒速稳赚两千