国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

canvas無法使用rem單位的解決方案

IntMain / 3426人閱讀

摘要：我們在使用時需要設置畫布的大小，即設置標簽的，屬性。在移動端，畫布的大小要根據屏幕的大小進行適配，我們一般采用結合媒體查詢的方式。

我們在使用canvas時需要設置畫布的大小，即設置canvas標簽的width，height屬性。

在移動端，畫布的大小要根據屏幕的大小進行適配，我們一般采用rem結合媒體查詢的方式。使用canvas時就遇到遇到一些問題：

canvas的width屬性不支持rem單位(如果使用樣式當然支持rem，但注意canvas的width屬性與style中的width是有區別的)，如下

translate方法傳參是坐標位置，不帶單位，如ctx.translate(10,10);

適配屏幕是必須的，但如何解決？用最原始的百分比布局就可以：

//獲取屏幕的寬度
var  clientWidth = document.documentElement.clientWidth;
//根據設計圖中的canvas畫布的占比進行設置
var canvasWidth = Math.floor(clientWidth*200/720);
canvas.setAttribute("width",canvasWidth+"px");
canvas.setAttribute("height",canvasWidth+"px");
//translate方法也可以直接傳入像素點坐標

最后順便放上寫好的Demo：http://jsfiddle.net/0eLzthjv/

如果有其他解決方案，歡迎討論交流！如果文章對你有幫助，點下面的推薦鼓勵下唄(?>?

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

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

相關文章

  • 【css】常見問題

    摘要：將元素顯示為內聯元素，元素前后沒有換行符。我們知道內聯元素是無法設置寬高的，所以一旦將元素的屬性設為，設置屬性和是沒有用的。這個屬性值融合了和的特性，即是它既是內聯元素，又可以設置和。 CSS 中 inline 元素可以設置 padding 和 margin 嗎？ 行內元素設置width,height無效。但是設置margin和padding是有效的。行內非替換元素的外邊距不會改變一個...

    renweihub 評論0 收藏0

  • 移動端rem自適應布局(切圖)

    摘要：用做自適應單位也是一種流行的做法簡介本篇適用于初次使用為單位切圖而無從下手的童鞋。核心是根據屏幕動態改變根元素字體大小，以達到適配各種屏幕。不過對于快速做手機端切圖很有幫助。 1.文章很久沒更新，里面的東西可能并不適用現在的大環境，配套代碼太老舊也只是個參考，不要直接用到生產上。 2.用vw做自適應單位也是一種流行的做法 簡介：本篇適用于初次使用rem為單位切圖而無從下手的童鞋。核心...

    levius 評論0 收藏0

  • 移動端rem自適應布局(切圖)

    摘要：用做自適應單位也是一種流行的做法簡介本篇適用于初次使用為單位切圖而無從下手的童鞋。核心是根據屏幕動態改變根元素字體大小，以達到適配各種屏幕。不過對于快速做手機端切圖很有幫助。 1.文章很久沒更新，里面的東西可能并不適用現在的大環境，配套代碼太老舊也只是個參考，不要直接用到生產上。 2.用vw做自適應單位也是一種流行的做法 簡介：本篇適用于初次使用rem為單位切圖而無從下手的童鞋。核心...

    J4ck_Chan 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<