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

咱們在使用canvas時須要設置畫布的大小，即設置canvas標籤的width，height屬性。

<canvas width="200px" height="200px"></canvas>

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

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

<canvas width="2.5rem" height="2.5rem"></canvas>

• 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/

若是有其餘解決方案，歡迎討論交流！若是文章對你有幫助，點下面的推薦鼓勵下唄(๑>؂<๑）