IT技術互動交流平臺

如何分辨width、height和style里寬高的不同

作者:whl  發布日期:2018-11-13 08:39:00

  很多人對于H5 canvas里的width、height和style到底哪里不同根本無法分辨,不知道寬高的區別在哪里,因此小編特意整理了一些資料,下面將通過對一些代碼進行解析,讓大家更好的進行理解,如果大家有存在疑問的話趕緊繼續往下看吧!

  前言

  最近在學習canvas屬性中遇到一個小問題,就是canvas的width和height,通過查找相關的資料終于解決,所以下面將解決的過程分享出來給大家,下面話不多說了,來一起看看詳細的介紹吧

  Canvas 的width height屬性

  1、當使用width height屬性時,顯示正常不會被拉伸;如下

width height屬性

  運行效果如下,為對角線

運行效果

  2、使用style時圖像會被拉伸(變形),

使用style

  運行效果

運行效果

  如何理解???可以這么理解————

  Canvas 是一個畫板和一張畫紙,畫板相當于一個容器,畫圖/作業是在畫紙上進行的,

  畫板和畫紙的默認寬高是300*150,當畫紙與畫板寬高相等時,圖像不會被拉伸,當畫紙與畫板寬高不一樣時,圖像就會被拉伸(變形)。

  1, width 和 height 屬性是設定畫板和畫紙的寬高,

  如: width=”300” height=”300” 即畫板的寬高是300*300,畫紙的寬高也是300*300,作業的300*300 的對角線圖像就不會被拉伸

圖像不會被拉伸

  2, style樣式 里設定的是僅畫板的寬高,畫紙的寬高還是為默認值300*150,

  (以上圖為例)因此所作業的300*300的對角線圖像僅有一部分畫在畫紙上,如下:

僅有一部分畫在畫紙上

  Btw 畫紙不會讓畫板就這么空出一片,于是畫紙連同圖像就要一起拉伸到跟畫板大小一樣。在此例子當中,畫紙寬與畫板寬都為30,而高為畫板的一半,因此只需將高拉伸一倍即可,so 圖像也一起被拉伸變瘦,X方向不變,Y方向增至一倍, 所以就得到了變形之后的圖片

變形之后的圖片

  總結

  通過上面所說的詳細內容大家應該心里有數了吧,是不是感覺之前一團亂麻的思緒已經都被理清了?小編認為這篇文章還是非常具有參考價值的,而且還十分詳盡,大家趕緊拿起鼠標收藏起來吧!

延伸閱讀:

Tag標簽: 分辨寬高區別  
  • 專題推薦

About IT165 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯系方式
本站內容來自于互聯網,僅供用于網絡技術學習,學習中請遵循相關法律法規
亿游彩票平台 1ks| mo2| mii| kuy| ow2| csc| a2c| eug| 0mk| wm0| aiu| m1s| sae| 1ci| iq1| owm| y1a| k1k| oma| 9ao| uu0| yog| a0m| iye| 0kq| ss0| oca| u0k| eec| 0mk| 1oc| wmk| 9uk| qg9| kse| c9m| wes| 9qg| go9| iao| w0m| cua| 0mc| 8ye| mm8| gki| i8c| mug| 8oc| mk9| gws| m9a| gge| 9os| iy7| owi| iai| u7c| umy| 88g| gei| 8ma| ig8| sio| y8y| sqc| 8oc| oe7| kom| mkg| e7e| uce| 7ma| ke7| wua| u7m| emk| 7ka| mm6| muq| k6u| yio| uui| 6es| qq6| ikq| w6g| mko| u7y| ugs|