canvas裡設定width和css裡設定width和js裡設定width的區別
阿新 • • 發佈:2019-01-02
canvas.width 和 它的style.width是不一樣的:
canvas是個畫布,有他自己的寬和高(預設是沒有單位的純數字),就是canvas.width和canvas.height的寬和高,
行間樣式裡如果你用vh和vw設定寬高,不好意思,不可以,統統按照px計算,
css裡可以用vw,vh。但是,請記住,這裡設定的是style.屬性;
js裡用帶有單位的字串比如vw和vh還有px,設定width和height,還是不好意思,不好使,
這樣就不好使!!!
(style屬性是表現在頁面上的樣式,不是canvas的本身的屬性。一定要注意。隨意設定style的寬高直接導致的結果就是畫畫 變形變形變形)
好了,那麼怎麼做比較好?
我的做法是,要想自適應螢幕的大小。 可以在css裡設定width(就是style.width )為vw單位的寬度;在js裡獲取它的width(canvas的屬性) 然後賦值給 height。