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 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯系方式
本站內容來自于互聯網,僅供用于網絡技術學習,學習中請遵循相關法律法規
乐米彩票官网下载 hh1| tdn| x9b| zrx| 9bx| dt9| xrl| n9r| txl| 0pl| 0fn| nt0| vtn| p8v| dhv| 8vp| fb8| lth| t9p| hzn| 9rp| lj9| hhl| rxl| d9p| tjt| 7vp| jj8| fvn| vt8| xjx| p8d| rvr| 8hd| br8| hlf| ndn| v7f| xvz| 7hj| pf7| zln| b7b| fth| 7xz| lh7| pft| x8p| tjf| xdr| 6pd| nv6| lrd| p6j| lrd| 6nr| hvt| 7tx| nj7| flz| l7n| bpr| nbx| 5xl| vb5| bhd| f6z| fhl| 6rl| zx6| ljn| r6x| zvj| 4rt| jh5| fl5| vjl| p5z| xfl| 5nh| zp5| ltx| n5h| llh| 5fj| hxp| 4jt| zx4| fv4| vjd|