国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

微信小程序wx.createCanvasContext廢棄,使用wx.createOffscreenCanvas接口的繪制canvas 2d海報(bào)遇到的踩坑經(jīng)驗(yàn)。

這篇具有很好參考價(jià)值的文章主要介紹了微信小程序wx.createCanvasContext廢棄,使用wx.createOffscreenCanvas接口的繪制canvas 2d海報(bào)遇到的踩坑經(jīng)驗(yàn)。。希望對大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方,請大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

<canvas?id="myCanvas"?type="2d"?/>

在wxml頁面寫id,canvas-id已經(jīng)沒用了。然后像html一樣,使用js獲取這個(gè)canvas標(biāo)簽組件,在微信的js獲取使用wx自帶的方法。如下?文章來源地址http://www.zghlxwxcb.cn/news/detail-504188.html

wx.createSelectorQuery().select('#myCanvas').fields({?node:?true,?size:?true?}).exec((cres)?=>?{

? ? ? //在這里可以下獲取到canvas組件了,然后創(chuàng)建成畫板畫布。

? ? ? ? var?rect?=?cres[0]

?????????console.log(rect)

?????????var?textCanvas?=?rect.node??//?重點(diǎn)1

?????????var?ctx?=?textCanvas.getContext('2d')??//?重點(diǎn)2//創(chuàng)建畫布

? ? ? ? ?//這里踩坑1,我直接繪制,發(fā)現(xiàn)繪制的寬高和獲取到的寬高總有出入,明明打印canvas的寬高和我設(shè)置的寬高一樣,但是繪制在頁面填充顏色,發(fā)現(xiàn)寬度小了很多。

? ? ? ? //?后面經(jīng)過查了大量文獻(xiàn),發(fā)現(xiàn)原來需要根據(jù)手機(jī)的像素同比1:1化,代碼如下

? ? ? ??const?dpr?=?wx.getSystemInfoSync().pixelRatio

?????????textCanvas.width?=?rect.width?*?dpr

?????????textCanvas.height?=?rect.height?*?dpr

?????????ctx.scale(dpr,?dpr)

? ? ? ? ?//然后下面就跟我們在html繪制一樣,比如繪制文字

? ? ? ? ?ctx.font?=?`bold 18px?serif`

?????????ctx.fillStyle?=?"#ff6800"

?????????ctx.fillText("文字",10,10)

? ? ? ? ?//接下來是繪制圖片了,這里踩坑2

? ? ? ? ?//1.踩坑2,繪制圖片需要把圖片變成畫布再繪制,

? ? ? ? this.getImage("/assets/logo.png").then(image=>{

? ? ? ? ? ? ? ?ctx.drawImage(image,?10,?20, 38, 38)

? ? ? ? })

})

//?獲取圖片對象

??async?getImage?(url,width,?height)?{??

????const?off?=?wx.createOffscreenCanvas({type:'2d'})

????const?image?=?off.createImage()???

????await?new?Promise((resolve,?reject)=>{??????

??????image.onload?=?resolve??//?繪制圖片邏輯

??????image.src?=?url

????})

????return?image

??},

到了這里,關(guān)于微信小程序wx.createCanvasContext廢棄,使用wx.createOffscreenCanvas接口的繪制canvas 2d海報(bào)遇到的踩坑經(jīng)驗(yàn)。的文章就介紹完了。如果您還想了解更多內(nèi)容,請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • 微信小程序使用本地存儲(chǔ)方法wx.setStorageSync()和wx.getStorageSync()

    微信小程序的本地存儲(chǔ)可以使用wx.setStorageSync()和wx.getStorageSync()方法實(shí)現(xiàn) 使用wx.setStorageSync()方法可以將數(shù)據(jù)以鍵值對的方式存儲(chǔ)到本地存儲(chǔ)中: 獲取數(shù)據(jù):使用wx.getStorageSync()方法可以從本地存儲(chǔ)中獲取數(shù)據(jù): 更新數(shù)據(jù):要更新已經(jīng)存在的數(shù)據(jù),只需重新使用wx.setStorageSync

    2024年02月11日
    瀏覽(25)
  • 微信小程序?qū)W習(xí)筆記——WX:key的使用

    微信小程序?qū)W習(xí)筆記——WX:key的使用

    wx:key一般是用在wx:for或者其他需要?jiǎng)討B(tài)渲染的地方,采用wx:key可以對渲染列表中的元素給定唯一標(biāo)識(shí),使當(dāng)我們的數(shù)組發(fā)生改變時(shí),渲染中的原數(shù)據(jù)可以保持自己的特性。 舉個(gè)例子,現(xiàn)在有個(gè)點(diǎn)擊按鈕勾選的例子,當(dāng)我們勾選羔羊排骨一條,點(diǎn)擊增加數(shù)據(jù)后,羔羊排骨左側(cè)的

    2024年02月07日
    瀏覽(17)
  • 【微信小程序】后臺(tái)數(shù)據(jù)交互于WX文件使用

    【微信小程序】后臺(tái)數(shù)據(jù)交互于WX文件使用

    目錄 一、前期準(zhǔn)備 1.1 數(shù)據(jù)庫準(zhǔn)備 1.2 后端數(shù)據(jù)獲取接口編寫 1.3 前端配置接口 1.4?封裝微信的request請求 ? 二、WXS文件的使用 2.1 WXS簡介 2.2 WXS使用 ? 三、后臺(tái)數(shù)據(jù)交互完整代碼 3.1 WXML 3.2 JS 3.3 WXSS 效果圖? 創(chuàng)建數(shù)據(jù)庫: 注意: 字符集選擇 utf8mb4 ,因?yàn)榭赡苡么鎯?chǔ)用戶信息,

    2024年02月08日
    瀏覽(26)
  • 微信小程序不能使用wx.getlocation的解決方法

    1、沒在小程序開發(fā)平臺(tái)申請開通wx.getlocation API; 2、沒有在app.json文件中聲明配置; 3、開發(fā)版本庫較高,調(diào)到2.25.3試試; 4、打開微信小程序頁面右上角三個(gè)點(diǎn),打開小程序設(shè)置,查看是否允許使用位置信息。

    2024年02月11日
    瀏覽(26)
  • 【微信小程序】使用 wx.request 方法進(jìn)行異步網(wǎng)絡(luò)請求

    在微信小程序中,你可以使用 wx.request 方法進(jìn)行異步網(wǎng)絡(luò)請求,并將獲取到的列表數(shù)據(jù)渲染到 UI 上。 首先,在頁面的 data 中定義一個(gè)數(shù)組變量,用于存儲(chǔ)獲取到的列表數(shù)據(jù),例如: 然后,在頁面的生命周期函數(shù) onLoad 或需要觸發(fā)網(wǎng)絡(luò)請求的函數(shù)中,使用 wx.request 方法發(fā)送異

    2024年02月16日
    瀏覽(42)
  • uni編寫微信小程序使用wx.startLocationUpdateBackground監(jiān)聽位置

    uni編寫微信小程序使用wx.startLocationUpdateBackground監(jiān)聽位置

    需求:小程序退出或者微信在后時(shí),實(shí)時(shí)獲取當(dāng)前位置 代碼部分: manifest.json文件中需配置 requiredBackgroundModes需設(shè)置:location 判斷用戶有沒有開啟授權(quán): 使用uni.getSetting來獲取用戶的授權(quán) 沒有就直接使用uni.authorize

    2024年02月05日
    瀏覽(20)
  • 微信小程序之網(wǎng)絡(luò)數(shù)據(jù)請求 wx:request的簡單使用

    微信小程序之網(wǎng)絡(luò)數(shù)據(jù)請求 wx:request的簡單使用

    出于安全性方面的考慮,小程序官方對 數(shù)據(jù)接口的請求 做出了兩個(gè)限制: 只能請求 HTTPS 類型的接口必須將接口的域名添加到信任列表中 . 在自己的微信小程序開發(fā)的后臺(tái)管理中添加相應(yīng)的服務(wù)器域名,配置步驟: 登錄微信小程序管理后臺(tái) - 開發(fā) - 開發(fā)設(shè)置 - 服務(wù)器域名

    2024年02月16日
    瀏覽(29)
  • 微信小程序彈窗提示:wx.showToast、wx.showModal、wx.showLoading的使用場景與實(shí)現(xiàn)

    微信小程序彈窗提示:wx.showToast、wx.showModal、wx.showLoading的使用場景與實(shí)現(xiàn)

    使用場景 :常規(guī)的提示,沒有確定和取消按鈕。 例: 屬性: title:提示的內(nèi)容 icon:顯示的圖標(biāo),合法值有success、error、loading、none image:自定義圖標(biāo)的本地路徑,優(yōu)先級高于icon duration:提示的延遲時(shí)間 mask:是否顯示透明蒙層,防止觸摸穿透 success:API調(diào)用成功后的回調(diào)函

    2024年02月09日
    瀏覽(47)
  • 微信小程序中使用wx.navigateTo跳轉(zhuǎn)時(shí)頁面出現(xiàn)空白

    微信小程序中使用wx.navigateTo跳轉(zhuǎn)時(shí)頁面出現(xiàn)空白

    在微信小程序中當(dāng)觸發(fā)點(diǎn)擊事件后跳轉(zhuǎn)的頁面時(shí),跳轉(zhuǎn)的頁面出現(xiàn)空白,控制臺(tái)報(bào)Page \\\"pages/outline-xi/outline-xi\\\" has not been registered yet.可能是因?yàn)槭褂昧藅abbar時(shí)導(dǎo)致的app.json沒有使頁面初始化,需要把不是tabbar的頁面調(diào)在前面就能解決問題。 ?

    2024年02月16日
    瀏覽(22)
  • 微信小程序中使用 wx.getLocation獲取當(dāng)前詳細(xì)位置并計(jì)算距離

    微信小程序中使用 wx.getLocation獲取當(dāng)前詳細(xì)位置并計(jì)算距離

    wx.getLocation只能夠獲取經(jīng)緯度,不能夠拿到詳細(xì)地址;如果你的項(xiàng)目剛好也使用騰訊地圖的api,那么可以通過騰訊地圖的逆解析就能拿到詳細(xì)地址了; 先介紹一下wx.getLocation()方法的使用; 此方法可以獲取當(dāng)前的經(jīng)緯度和速度、高度;官網(wǎng)鏈接 想要使用這個(gè)方法,先需要在

    2024年02月08日
    瀏覽(96)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包