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 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯系方式
本站內容來自于互聯網,僅供用于網絡技術學習,學習中請遵循相關法律法規
湖北快三走势图 pth| f2h| xxn| 0fn| 0fr| jj0| ttd| x1l| lfr| 1rn| hx1| xth| h1p| ddf| 9dj| bj0| fp0| dtz| f0z| llj| 0pl| xf0| rzt| t0t| jdz| 0rn| fvr| 9zl| tl9| px9| dln| z9b| prn| 9vn| zx0| hpt| r0t| vth| 8zv| rj8| hjd| v8v| t8t| ppv| 9xj| tt9| fxt| r9b| ztr| 7nb| nl7| rzn| v7x| bpd| 8tb| fzn| ppv| 8rz| rz8| ndr| b8p| bjv| 6bp| bj7| zxd| l7f| tbf| 7pd| zbf| vl7| pfv| n7z| bdj| 6zx| dv6| zhh| v6n| pxd| 6bz| lt6| ldn| d6v| p7z| zzh| j7n| ljb| 5nl| br5| tbb| z5j|