canvas 元素的 offsetWidth

hzc 發布于2019-08-01 15:58 / 859人閱讀

摘要：正在做的一個項目用到了，根據元素的樣式大小動態設置元素的和。但是發現元素的似乎已經是占位大小再乘以了。再次驗證，代碼如下開發用的是，這臺電腦是屏，是，發現在和中，都顯示等項目上線，再回頭詳細研究這個問題。

正在做的一個項目用到了canvas，根據 canvas 元素的樣式大小、window.devicePixelRatio
動態設置 canvas 元素的 width 和 height 。

但是發現 canvas 元素的 offsetWidth 似乎已經是 CSS 占位大小再乘以 window.devicePixelRatio 了。
再次驗證，代碼如下：

body {
    margin: 0;
}
.canvas-container {
  width: 500px;
  height: 500px;
  margin: 100px auto;
  background: rgba(0, 0, 0, 0.3);
}
canvas {
    display: block;
    height: 100%;
}

document.querySelector("#text").innerHTML = document.querySelector(".canvas-container").offsetWidth + " " + document.querySelector("canvas").offsetWidth;

開發用的是MBP，這臺電腦是retina 屏，window.devicePixelRatio 是 2，
發現在 chrome 和 safari 中，都顯示 500 1000

等項目上線，再回頭詳細研究這個問題。

云服務器 GPU云服務器 offsetWidth html5的canvas 元素的樣式 Canvas

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50236.html

Canvas 實現炫麗的粒子運動效果（粒子生成文字）

摘要：代碼實現炫麗的粒子運動效果云庫前端散開類型歸位隨機散開效果對歸位有效輸入漢字后回車代碼不多，只要是幾個操作元素。看起來運行順暢的代碼也或多或少有一些瑕疵，日前這個效果還只支持中文。沒有最好，只有更好，如題所示，這篇文章只要是分享一個用 Canvas 來實現的粒子運動效果。感覺有點標題黨了，但換個角度，勉勉強強算是炫麗吧，雖然色彩上與炫麗無關，但運動效果上還是算得上有點點炫的。不管怎么...

icattlecoder 2019-08-26 11:33 評論0 收藏0
網頁保存為圖片及高清截圖的優化 | canvas跨域圖片配置

摘要：本次技術調研來源于項目中的一個重要功能需求實現微信長按網頁保存為截圖。以下主要解決兩類跨域的圖片資源包括已配置過的中的圖片資源和微信用戶頭像圖片資源。本次技術調研來源于H5項目中的一個重要功能需求：實現微信長按網頁保存為截圖。這里有個栗子（請用微信打開，長按圖片即可保存）：3分鐘探索你的知識邊界將整個網頁保存為圖片是一個十分有趣的功能，常見于H5活動頁的結尾頁分享。以下則是項目中...

zhaochunqi 2019-08-01 17:43 評論0 收藏0
網頁保存為圖片及高清截圖的優化 | canvas跨域圖片配置

摘要：本次技術調研來源于項目中的一個重要功能需求實現微信長按網頁保存為截圖。以下主要解決兩類跨域的圖片資源包括已配置過的中的圖片資源和微信用戶頭像圖片資源。本次技術調研來源于H5項目中的一個重要功能需求：實現微信長按網頁保存為截圖。這里有個栗子（請用微信打開，長按圖片即可保存）：3分鐘探索你的知識邊界將整個網頁保存為圖片是一個十分有趣的功能，常見于H5活動頁的結尾頁分享。以下則是項目中...

GHOST_349178 2019-08-21 16:51 評論0 收藏0
網頁保存為圖片及高清截圖的優化 | canvas跨域圖片配置

摘要：本次技術調研來源于項目中的一個重要功能需求實現微信長按網頁保存為截圖。以下主要解決兩類跨域的圖片資源包括已配置過的中的圖片資源和微信用戶頭像圖片資源。本次技術調研來源于H5項目中的一個重要功能需求：實現微信長按網頁保存為截圖。這里有個栗子（請用微信打開，長按圖片即可保存）：3分鐘探索你的知識邊界將整個網頁保存為圖片是一個十分有趣的功能，常見于H5活動頁的結尾頁分享。以下則是項目中...

Galence 2019-08-30 15:53 評論0 收藏0