1. 程式人生 > >畫布設定(style設定寬度,高度 和直接寫canvas的寬度,高度)的不同影響

畫布設定(style設定寬度,高度 和直接寫canvas的寬度,高度)的不同影響

今天在進行畫布學習的時候,出現了下面的問題:


程式碼寫的是畫的圓形。結果卻是橢圓形。經過討教和資料查詢,發現為題出現在上面的畫布定義上面。

修改程式碼後,問題消失。


在進行跨步寬度和高度定義的時候,需要搞清楚兩個概念:

1.畫布的寬和高(ps新建畫布的寬和高);

2.畫布所在畫板的寬和高(例如ps開啟後的視窗);

預設的畫板、畫布的寬和高是都是300*150的。但在畫布上設定style屬性的話,相當於把畫板的寬和高改變了,二畫布的寬和高還是預設值,所以畫布會出現拉伸的情況,此例中設定的畫板的寬和高為300,相當於將畫布在處置高度上面拉伸了一倍,所以圓形就變成了橢圓形。 而直接設定寬和高相當於是同時修改了畫板和畫布的寬和高,所以在畫布上畫的圖形不會出現拉伸。