微信小程式實現畫布各種手機尺寸自適應

2021-09-22 18:34:58 字數 421 閱讀 4254

實現思路,獲取元件節點的寬高,然後把元件rpx單位的寬高填充到畫布的px單位,通過

wx.createselectorquery().select(』#canvas-container』).boundingclientrect(function (rect) ).exec()

獲取節點的rpx單位的寬高會自動轉換成px單位。

wx.createselectorquery().select('#canvas-container').boundingclientrect(function (rect) ).exec()
使用在畫布裡面:

ctx.translate(width, width);

微信小程式 設定畫布字型

得將屬性設定寫在filltext的前面,否則不起作用 var context wx.createcanvascontext canvas context.setfontsize 10 設定字型大小 context.settextalign center 設定字型水平居中 context.settex...

微信小程式開發文件 畫布

canvas 屬性名型別預設值 說明canvas id string canvas 元件的唯一識別符號 disable scroll boolean false 當在 canvas 中移動時且有繫結手勢事件時,禁止螢幕滾動以及下拉重新整理 bindtouchstart eventhandle 手指觸...

關於微信小程式的尺寸關係

通過rpx,大家只需要根據750的設計稿寫 即可,不必擔心它在各個平台的適配情況,rem的優勢 rem是 移動web端就是採用此方案,其中r可以理解成root,不同的頁面設定不同頁面的根元素的font size的值,就可以達到響應式布局 或者是 查詢設定根元素的尺寸 media screen and...