資訊專欄INFORMATION COLUMN
摘要：我們在使用時(shí)需要設(shè)置畫布的大小，即設(shè)置標(biāo)簽的，屬性。在移動端，畫布的大小要根據(jù)屏幕的大小進(jìn)行適配，我們一般采用結(jié)合媒體查詢的方式。
我們在使用canvas時(shí)需要設(shè)置畫布的大小，即設(shè)置canvas標(biāo)簽的width，height屬性。
在移動端，畫布的大小要根據(jù)屏幕的大小進(jìn)行適配，我們一般采用rem結(jié)合媒體查詢的方式。使用canvas時(shí)就遇到遇到一些問題：
canvas的width屬性不支持rem單位(如果使用樣式當(dāng)然支持rem，但注意canvas的width屬性與style中的width是有區(qū)別的)，如下
translate方法傳參是坐標(biāo)位置，不帶單位，如ctx.translate(10,10);
適配屏幕是必須的，但如何解決？用最原始的百分比布局就可以：
//獲取屏幕的寬度
var clientWidth = document.documentElement.clientWidth;
//根據(jù)設(shè)計(jì)圖中的canvas畫布的占比進(jìn)行設(shè)置
var canvasWidth = Math.floor(clientWidth*200/720);
canvas.setAttribute("width",canvasWidth+"px");
canvas.setAttribute("height",canvasWidth+"px");
//translate方法也可以直接傳入像素點(diǎn)坐標(biāo)
最后順便放上寫好的Demo：http://jsfiddle.net/0eLzthjv/
如果有其他解決方案，歡迎討論交流！如果文章對你有幫助，點(diǎn)下面的推薦鼓勵(lì)下唄(?>?
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85940.html
摘要：將元素顯示為內(nèi)聯(lián)元素，元素前后沒有換行符。我們知道內(nèi)聯(lián)元素是無法設(shè)置寬高的，所以一旦將元素的屬性設(shè)為，設(shè)置屬性和是沒有用的。這個(gè)屬性值融合了和的特性，即是它既是內(nèi)聯(lián)元素，又可以設(shè)置和。 CSS 中 inline 元素可以設(shè)置 padding 和 margin 嗎？ 行內(nèi)元素設(shè)置width,height無效。但是設(shè)置margin和padding是有效的。行內(nèi)非替換元素的外邊距不會改變一個(gè)...
摘要：用做自適應(yīng)單位也是一種流行的做法簡介本篇適用于初次使用為單位切圖而無從下手的童鞋。核心是根據(jù)屏幕動態(tài)改變根元素字體大小，以達(dá)到適配各種屏幕。不過對于快速做手機(jī)端切圖很有幫助。 1.文章很久沒更新，里面的東西可能并不適用現(xiàn)在的大環(huán)境，配套代碼太老舊也只是個(gè)參考，不要直接用到生產(chǎn)上。 2.用vw做自適應(yīng)單位也是一種流行的做法 簡介：本篇適用于初次使用rem為單位切圖而無從下手的童鞋。核心...
摘要：用做自適應(yīng)單位也是一種流行的做法簡介本篇適用于初次使用為單位切圖而無從下手的童鞋。核心是根據(jù)屏幕動態(tài)改變根元素字體大小，以達(dá)到適配各種屏幕。不過對于快速做手機(jī)端切圖很有幫助。 1.文章很久沒更新，里面的東西可能并不適用現(xiàn)在的大環(huán)境，配套代碼太老舊也只是個(gè)參考，不要直接用到生產(chǎn)上。 2.用vw做自適應(yīng)單位也是一種流行的做法 簡介：本篇適用于初次使用rem為單位切圖而無從下手的童鞋。核心...
閱讀 1782·2021-09-28 09:43
閱讀 1129·2021-09-23 11:22
閱讀 2746·2021-09-14 18:05
閱讀 1834·2019-08-30 15:52
閱讀 2828·2019-08-30 10:55
閱讀 2022·2019-08-29 16:58
閱讀 1337·2019-08-29 16:37
閱讀 3049·2019-08-29 16:25
