IT技術(shu)互(hu)動交流平台

腾讯分分彩代理官网

作(zuo)者︰whl  發布日期︰2020-02-26 00:26:00

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

  前言

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

  Canvas 的width height屬性(xing)

  1、當(dang)使(shi)用width height屬性(xing)時,顯示正常(chang)不會被拉伸;如下

width height屬性(xing)

  運(yun)行效果如下,為對角線

運(yun)行效果

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

使(shi)用style

  運(yun)行效果

運(yun)行效果

  如何理解???可(ke)以這(zhe)麼理解————

  Canvas 是一(yi)個畫(hua)板(ban)和一(yi)張畫(hua)紙,畫(hua)板(ban)相當(dang)于一(yi)個容器,畫(hua)圖(tu)/作(zuo)業是在畫(hua)紙上進(jin)行的,

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

  1, width 和 height 屬性(xing)是設定畫(hua)板(ban)和畫(hua)紙的mu)碭擼/p>

  如︰ width=”300” height=”300” 即畫(hua)板(ban)的mu)碭呤00*300,畫(hua)紙的mu)碭咭ye)是300*300,作(zuo)業的300*300 的對角線圖(tu)像就不會被拉伸

圖(tu)像不會被拉伸

  2, style樣(yang)式 里設定的是僅畫(hua)板(ban)的mu)碭擼 hua)紙的mu)碭 故俏  現00*150,

  (以上圖(tu)為例(li))因(yin)此所作(zuo)業的300*300的對角線圖(tu)像僅有一(yi)部分(fen)畫(hua)在畫(hua)紙上,如下︰

僅有一(yi)部分(fen)畫(hua)在畫(hua)紙上

  Btw 畫(hua)紙不會讓畫(hua)板(ban)就這(zhe)麼空出一(yi)片(pian),于是畫(hua)紙連同(tong)圖(tu)像就要一(yi)起拉伸到(dao)跟畫(hua)板(ban)大小(xiao)一(yi)樣(yang)。在此例(li)子當(dang)中,畫(hua)紙寬與畫(hua)板(ban)寬都為30,而高為畫(hua)板(ban)的一(yi)半,因(yin)此只需將高拉伸一(yi)倍即可(ke),so 圖(tu)像也(ye)一(yi)起被拉伸變瘦,X方(fang)向(xiang)不變,Y方(fang)向(xiang)增至一(yi)倍, 所以就得到(dao)了變形之後的圖(tu)片(pian)

變形之後的圖(tu)片(pian)

  總結

  通過上面所說(shuo)的詳細內(na)容大家應該心里有數了吧,是不是感覺之前一(yi)團亂麻(ma)的思緒已(yi)經都被理清了?小(xiao)編(bian)認為這(zhe)篇文章還是非常(chang)具(ju)有參考價(jia)值的,而且yi)故 fen)詳盡,大家趕緊(jin)拿(na)起鼠(shu)標收藏起來吧!

腾讯分分彩代理官网

    Tag標簽(qian)︰分(fen)辨寬高區別  
    • 腾讯分分彩代理官网

    五分11选5官网About IT165 - 廣告服務 - 隱私聲明 - 版權申(shen)明 - 免責條款 - 乐彩网官网網站地圖(tu) - 網友投稿(gao) - 聯系(xi)方(fang)式
    本站內(na)容來自于互(hu)聯網,僅供用于網絡技術(shu)學習,學習中請遵循相關法(fa)律(lv)法(fa)規(gui)
    腾讯分分彩代理官网 | 下一页